类：悬停文字修饰工作，但不色

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必须来后：link和：visited（如果它们存在）在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/

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