1

In css how would I change on hover the color of test 1 but not color of list 1, 2,3?

<ul>
    <li> 
        test 1 
        <ul>
            <li> List 1</li>
            <li> List 2</li>
            <li> List 3</li>
        </ul>
    </li>
</ul>
Claremont
  • 325
  • 2
  • 5
  • 12
  • Some clues: http://jsfiddle.net/hhauf/ – Jared Farrish Aug 07 '12 at 23:06
  • This is actually a pretty good question, but the devil's in the details. A generic answer will help, but for best results you'll have to troubleshoot it based on what *exactly* your markup is and what *exactly* you want to have happen. There's no magic bullet that I'm aware of since the style is inherited. (I'm assuming this markup and your stated goal are for example purposes only) – Wesley Murch Aug 07 '12 at 23:14
  • Keep in mind that since `test 1` is not in a descendent element separate from the contained `ul` within that text's parent `li` element, you have to "return" the sub element's `color` definition on `:hover`. It's not really that clean, in other words. You could, however do: http://jsfiddle.net/hhauf/3/ Which would be cleaner, if that's what you're after. – Jared Farrish Aug 07 '12 at 23:14

4 Answers4

4

One way is to specify the "default" color:

li:hover {
    color:#f00;
}
li, li:hover li {
    color:#000;
}​

http://jsfiddle.net/D8dwt/1/

Another (cheat?) is to use more markup to wrap the content you want styled on hover:

li:hover span {
    color:#f00;
}​

<ul>
    <li> 
        <span>test 1</span>
        <ul>
            <li> List 1</li>
            <li> List 2</li>
            <li> List 3</li>
        </ul>
    </li>
</ul>​
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • I don't think that's cheating, I think it's *sane*. – Jared Farrish Aug 07 '12 at 23:17
  • I also think that the `span`-approach is the best answer and it has the sleekest code. – insertusernamehere Aug 07 '12 at 23:23
  • 1
    A lot of people don't like to (ab)use generic tags for stuff like this, I guess I was mainly catering to those folks (and it does add meaningless bulk/mess to your HTML). Another drawback is that it's not always an option to change the markup. In the real world though, that's what I'd probably do, but the first option is probably the most elegant and least overall code. The problem with that is you need to *know* what color to use and can't just inherit it. – Wesley Murch Aug 07 '12 at 23:31
  • What is a `span` for then? I think the first is clunky and prone to several issues, *all* of which are solved by using an element type designed for that specific purpose. It's *genericness* is it's purpose (over `i` or `b` or whatnot). – Jared Farrish Aug 07 '12 at 23:53
1

This is one way to go:

ul > li {
    color: red;
}

ul > li:hover {
    color: blue;
}

ul > li:hover > ul > li {
    color: red;
}
insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
  • Yeah, you can get rid of the child selectors and use a more general descanted selector. But the child selector might be faster than the descanted selector: http://stackoverflow.com/a/1182223/1456376 – insertusernamehere Aug 07 '12 at 23:19
0

Add test1 into a div element so that it is in a separate leaf.

css:

div:hover {
   color:  blue;
}

Although there may be a way to do this without modifiying the html..

zanegray
  • 768
  • 7
  • 13
0

Give it it's own class and define it in your CSS file. 

<li class="yourclass">

Or put it in tags and define the link in your CSS

li.yourclass a:hover {
    text-decoration: underline ;
}
Tom
  • 311
  • 1
  • 3
  • 11