简体   繁体   中英

class a:hover working for text-decoration, but not color

I have the following HTML code:

    <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>

The following CSS code:

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;
}

And, the following jQuery code:

$(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);
    });
});

I am trying to build a practice site with a color picker, but that's not my main focus at the moment. Even though I have values set for .navLink a:link and .navLink a:hover , the Google Chrome is ignoring the code. I know it's good, because the links are black (not blue), and the underline is gone (thanks to text-decoration) , and it works in Firefox and IE9 just fine. The problem is Chrome.

:hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

Try putting the :hover rule after your #navBar a:visited rule.

Source: http://www.w3schools.com/cssref/sel_hover.asp

Replace:

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

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

By:

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

It is because of the display:block; property.

http://jsfiddle.net/s46wu/

Sincerely I don't know why it happens. It is maybe a bug.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM