[英]How to make a caret in a link change color when the LINK is hovered over?
[英]How to make the link text change color instead of underlining when hovered over
我已经设置了此菜单,但将鼠标悬停时会加下划线,但是我希望它更改颜色,这是我的wordpress主题的默认设置。 标题“ BOLI STYLUS”完全按照我的意愿更改颜色。
这是标题的代码:
<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
这是菜单:
这是它的style.css代码:
.header_nav ul{
margin: 0;
padding: 0;
text-align: center;
}
.header_nav ul li{
display: inline;
}
.header_nav ul li a{
float: center;
padding: 10.5px 11px;
}
.header_nav ul li a:hover, .menu ul li .current{
color: #50a9cb;
}
这是header.php代码:
<div class="header_nav">
<ul>
<li><a href="/pages/glifoptions">BOLI</a></li>
<li><a href="/products/cosmonaut">BOLI+</a></li>
<li><a href="/pages/about-us">ABOUT US</a></li>
<li><a href="/pages/faq">FAQ</a></li>
<li><a href="/pages/press">PRESS</a></li>
<li><a href="/cart">YOUR CART (0)</a></li>
</ul>
</div>
您可以使用以下规则,并用所需的颜色替换XXXXXX 。 我假设您希望保持相同的风格,即使选定的项目也具有与您将鼠标悬停时相同的样式。
.header_nav ul li a:hover, .menu ul li .current
{
color: #XXXXXX; /* replace with real value */ text-decoration: none;
}
您显示的代码在将鼠标悬停时确实为文本着色。 但是,它也强调了这一点。 要更改添加的文本装饰,请执行以下操作: 就像我在下面做的那样。
.header_nav ul li a{
float: center;
padding: 10.5px 11px;
**text-decoration: none;**
}
有关完整的代码,请参见此处:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.