a类：悬停工作进行文字装饰，但不是颜色

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设置了值，Google Chrome也会忽略该代码。我知道这很好，因为链接是黑色的（不是蓝色），并且下划线消失了（感谢text-decoration)，它在Firefox和IE9中运行得很好。问题是Chrome。

Answer 1

  

：hover必须跟在：链接和：访问（如果它们存在）在CSS定义中，以便有效！

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

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

Answer 2

替换：

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

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

人：

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

Answer 3

这是因为display:block;属性。

http://jsfiddle.net/s46wu/

真诚地，我不知道为什么会这样。这可能是一个错误。