jquery - 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:linkand设置了值.navLink a:hover，谷歌浏览器也忽略了代码。我知道这很好，因为链接是黑色的（不是蓝色的），并且下划线消失了（感谢text-decoration)，它在 Firefox 和 IE9 中运行良好。问题是 Chrome。

score 3 · Accepted Answer

:hover 必须在 CSS 定义中的 :link 和 :visited （如果它们存在）之后，才能有效！

试着把规则放在:hover你的规则之后#navBar a:visited。

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

score 0 · Accepted Answer

代替：

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

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

经过：

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

score 0 · Accepted Answer

是因为display:block;财产。

http://jsfiddle.net/s46wu/

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

jquery - a类：悬停用于文本装饰，但不适用于颜色

3 回答 3

Related

Reference