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:linkとに値を設定していますが.navLink a:hover、Google Chrome はコードを無視しています。リンクが黒（青ではなく）で、下線が消えているので（おかげで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