除了一个悬停外，如何在列表中创建所有项目？

Question

我试图将其设置为当您将鼠标悬停在导航栏上时，除主页按钮外的每个项目都会暂时具有橙色背景。然后我尝试使用主页按钮向列表项添加一个特定的类，同时在css中列出它具有更高的特异性并且不起作用。我尝试将一个特定的类添加到导航栏中的每个列表项而不是带有主页按钮的列表项，并简单地列出该悬停的样式属性，同时删除所有其他悬停按钮规则。如何为主页按钮关闭悬停？我不想把它从列表中拿走，因为它会抛弃标题的整个对齐方式。这是我的代码。 https://github.com/chawalk90/padibilityweb

Answer 1

基于PURE CSS的解决方案

Check Demo selecting individual elements

This Demo Show Specific element being omitted

HTML

<ul>
    <li>First child</li>
      <li>second child</li>
      <li>third child</li>
      <li>fourth child</li>
      <li>fifth child</li>
</ul>   

CSS

li{

    list-style:none;
}
ul li:nth-child(1):hover {  
  color: #ac5;
}
ul li:nth-child(2):hover {  
  color: #eb2;
}
ul li:nth-child(3):hover {  
  color: #1e1;
}
ul li:nth-child(4):hover {  
  color: #43f;
}
ul li:nth-child(5):hover{  
  color: #1ee;
}

  

您提出的案例

HTML

<ul>
    <li>First child</li>
      <li>second child's color does not change on hover</li>
      <li>third child</li>
      <li>fourth child</li>
      <li>fifth child</li>
</ul>   

CSS

li{

    list-style:none;
}
ul li:not(:nth-child(2)):hover {  
  color: red;
}

ul li:nth-child(2) {  
  color: blue;
}

Answer 2

我会使用JavaScript。 Check this out

`var classes = ["one", "two", "three"]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
    var curN = n[classname];
    for(var i = 0; i < curN; i ++) {
        elms[classname][i].style.backgroundColor = color;
    }
}
for(var k = 0; k < nclasses; k ++) {
    var curClass = classes[k];
    elms[curClass] = document.getElementsByClassName(curClass);
    n[curClass] = elms[curClass].length;
    var curN = n[curClass];
    for(var i = 0; i < curN; i ++) {
        elms[curClass][i].onmouseover = function() {
            changeColor(this.className, "yellow");
        };
        elms[curClass][i].onmouseout = function() {
            changeColor(this.className, "white");
        };
    }
};`

Answer 3

http://jsfiddle.net/na04ya3f/ CSS适用于所有现代浏览器，

CSS

ul, ul li{

   transition:all 1.5s;

    color:black;

}

ul:hover li:not(:first-child){

   background-color:orange; 

}

HTML

<ul>
    <li>Home</li>
    <li>Not Home</li>
    <li>Not Home</li>
</ul>