How do I make all items in a list except one hover?

Question

I'm trying to make it so that when you hover over the navbar, every item EXCEPT the home button momentarily has a background of orange. I then tried adding a specific class to the list item with the home button while listing it with greater specificity in the css and that didn't work. I tried adding a specific class to every list item in the nav bar other than the one with the home button and simply listing the styling properties for that hover while deleting all of my other rules for hover buttons. What can I do to turn the hover off for the home button? I don't wanna take it away from the list because then, it throws off the entire alignment of the header. Here is my code. https://github.com/chawalk90/padibilityweb

Answer 1

PURE CSS Based Solution

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

The Case you asked

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

I would use JavaScript for this. 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/ The CSS works for all modern browsers,

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>