CODEWITHSUNDEEP
htmlcss
user3319906
user3319906

Reputation: 21

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

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

Upvotes: 1

Views: 1348

Answers (3)

Jhecht
Jhecht

Reputation: 4435

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>

Upvotes: 0

codefreaK
codefreaK

Reputation: 3662

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

Upvotes: 1

Eric Hazard
Eric Hazard

Reputation: 1

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");
        };
    }
};`

Upvotes: 0

Related Questions