Question

我设置了这个菜单，当它盘旋时它会突出显示，但我希望它能改变颜色，这是我的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>

这是菜单：

menu

以下是它的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>

Answer 1

您可以使用以下规则，并将 XXXXXX 替换为所需的颜色。我假设你想要保持相同的风格，即让所选的项目具有与你悬停它时相同的风格。

.header_nav ul li a:hover, .menu ul li .current
{
    color: #XXXXXX; /* replace with real value */ text-decoration: none;
}

Answer 2

当您将鼠标悬停在时，显示的代码为文本着色。但是，它也强调了它。要改变它，添加text-decoration：none;就像我在下面做的那样。

.header_nav ul li a{ float: center; padding: 10.5px 11px; **text-decoration: none;** }

有关完整代码，请参阅此处：

http://jsfiddle.net/8KPcy/1/

如何使链接文本在悬停时更改颜色而不是下划线

2 个答案: