类a:用于文本装饰的hover，但不用于颜色

Question

我有以下HTML代码:

    <h1>No Real Purpose</h1>
    <!--Navigation menu-->
    <div id = "navBar">
        <ul>
            <li class = "navLink">
                <a href = "page 1.html">Page 1</a>
            </li>
            <li class = "navLink">
                <a href = "page 2.html">Page 2</a>
            </li>
            <li class = "navLink">
                <a href = "page 3.html">Page 3</a>
            </li>
            <li class = "navLink">
                <a href = "page 4.html">Page 4</a>
            </li>
            <li class = "navLink">
                <a href = "page 5.html">Page 5</a>
            </li>
            <li class = "navLink">
                <a href = "page 6.html">Page 6</a>
            </li>
            <li class = "navLink">
                <a href = "page 7.html">Page 7</a>
            </li>
            <li class = "navLink">
                <a href = "page 8.html">Page 8</a>
            </li>
            <li class = "navLink">
                <a href = "page 9.html">Page 9</a>
            </li>
            <li class = "navLink">
                <a href = "page 10.html">Page 10</a>
            </li>
        </ul>
    </div>
    <br />
    <br />
    <!--Main content area-->
    <div id = "main">
            <!--collapsible <div>'s-->
        <div class = "collapse">
            <h2>Heading 1 <span class = "cause">+/-</span></h2>
            <p class = "effect">
                Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            </p>
        </div>
        <br />
        <div class = "collapse">
            <h2>Heading 2 <span class = "cause">+/-</span></h2>
            <p class = "effect">
                text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            </p>
        </div>
    </div>
    <!--The colorPicker I'm working on-->
    <table id = "colorPicker">
        <tr>
            <th colspan = "6">Color Picker</th>
        </tr>
        <tr>
            <td id = "blackOpt"></td> <td id = "redOpt"></td> <td id = "orangeOpt"></td> <td id = "greenOpt"></td> <td id = "indigoOpt"></td> <td id = "lightGrayOpt"></td>
        </tr>
        <tr>
            <td id = "whiteOpt"></td> <td id = "brownOpt"></td> <td id="yellowOpt"></td> <td id = "blueOpt"></td> <td id = "violetOpt"
></td> <td id = "darkGrayOpt"></td>
        </tr>
    </table>
</body>
</html>

下面的CSS代码:

body
{
    margin: 0;
    background-image: url('green-clouds.jpg');
}
h1
{
    width: 100%;
    top: 0;
    background-color: rgba(240,240,240,0.5);
    margin: 0;
    text-align: center;
}
#navBar
{
    display: block;
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
    clear: left;
    margin: 0;
}
#navBar ul
{
    width: 45%;
    clear: left;
    float: left;
    list-style: none;
    position: relative;
    left: 50%;
    text-align: center;
}
.navLink a:link
{
    text-decoration: none;
    color: red;
}
/*The code Chrome isn't registering*/
.navLink a:hover
{
    display:block;
    color:white;
}

/*The code Chrome isn't registering*/
#navBar a:visited
{
    color: black;
}
.navLink
{
    display: block;
    float: left;
    list-style: none;
    position: relative;
    margin: .5em;
    padding: 1px;
    right: 50%;
    background-color: rgba(240,240,240,0.5);
    background-size: 50%;
    border-radius: 5px;
    font-weight: bold;
}
#main
{
    display: block;
    background-size: 100%;
    width: 800px;
    margin-top: 1em;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}
.collapse
{
    border: 2px solid #004400;
    padding: 0px;
    margin: 0;
    width: 100%
}
.collapse h2
{
    width: 100%;
    border-bottom: 2px solid #004400;
    background-color: rgba(240,240,240,0.5);
    margin: 0;
    padding: 0;
}
.cause
{
    display: inline-block;
    position: relative;
    right: 20px;
    float: right;
    text-align: center;
    padding: 0;
    cursor: pointer;
}
.effect
{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #004400;
    color: #F8F8F8;
}
table
{
    border: 2px solid black;
    border-collapse: collapse;
    background-color: #448844;
    color: black;
    width: 350px;
    padding: 2px;
    margin: 2px;
    position: fixed;
    bottom: 0px;
    z-index: 1px;
}
td
{
    border: 2px solid black;
    border-collapse: collapse;
    width: 50px;
    height: 50px;
}
#blackOpt
{
    background-color: black;
}
#whiteOpt
{
    background-color: #F8F8F8;
}
#redOpt
{
    background-color: #CC0000;
}
#brownOpt
{
    background-color: #664422;
}
#orangeOpt
{
    background-color: orange;
}
#yellowOpt
{
    background-color: yellow;
}
#greenOpt
{
    background-color: #004400;
}
#blueOpt
{
    background-color: blue;
}
#indigoOpt
{
    background-color: #5500FF;
}
#violetOpt
{
    background-color: purple;
}
#lightGrayOpt
{
    background-color: #BBBBBB;
}
#darkGrayOpt
{
    background-color: #444444;
}

和以下jQuery代码:

$(document).ready(function()
{
    //Changes the #navBar colors on mouseenter
    $('.navLink').mouseenter(function()
    {
        $(this).css('background-color', '#004400');
        $(this).closest('a:link').css('color', '#F8F8F8');
    });
    //Reverts the #navBar colors on mouseleave
    $('.navLink').mouseleave(function()
    {
        $(this).css("background-color","rgba(240,240,240,0.5)");
    });
    //Toggles the <p> closest to a +/- <span>
    $('.cause').click(function()
    {
        $(this).closest('.collapse').find('.effect').slideToggle('slow');
    });
    //Runs the colorPicker (work in progress)
    $('td').parent('#colorPicker').click(function()
    {
        var priColor = $(this).css('backgroundColor');
        $('body').css(priColor);
    });
});

我正在尝试用颜色选择器建立一个练习网站，但这不是我目前的主要关注点。即使我为.navLink a:link和.navLink a:hover设置了值，谷歌浏览器也忽略了代码。我知道这很好，因为链接是黑色的(不是蓝色)，下划线不见了(多亏了text-decoration)，它在Firefox和IE9中工作得很好。

Answer 1

:hover必须出现在CSS定义中的:link和:visited(如果它们存在的话)之后，这样才有效!

尝试将:hover规则放在#navBar a:visited规则之后。

来源:http://www.w3schools.com/cssref/sel_hover.asp

Answer 2

Replace:

http://jsfiddle.net/6tmL3/5/

 $(this).closest('a:link');

由:

 $(this).find('a:link');

Answer 3

这是因为display:block;的属性。

http://jsfiddle.net/s46wu/

我真的不知道为什么会发生这种事。