ansaurus

Question

How to highlight parent li text only on :hover?

Answer 1

+2 A:

You'll likely need to mess with some of the positioning on different browsers, but you can add the following to your styles:

li:hover ul { background: white; }
li:hover ul li:hover { background: yellow; }

Replace "white" with whatever hex, rgb, or color value you need.

JN Web 2010-05-21 16:37:28

+1 yes good idea. but in that ul,li li:hover will show till if my moues is on child item inside ul. but i think this is the last possible way in css.

metal-gear-solid 2010-05-21 16:40:57

See my edit, does that help any?

JN Web 2010-05-21 16:43:00

NO I mean i want to highlight only one item at a time.

metal-gear-solid 2010-05-21 16:45:21

Answer 2

+1 A:

If you want to only highlight "Article" when the mouse is over the word, then you'll need to edit the HTML to add some <span> tags or something similar around each word:

<style>
    li span:hover {background:red}
    li li span:hover {background:yellow}
</style>
</head>

<body>
    <p id="hello">Hello World</p>
    <ul>
        <li><span>Weblog</span></li>
        <li><span>Articles</span>
        <ul>
        ...etc

EDIT: this looks like a menu - in which case you'll be using links, so you can target those instead of using spans.

DisgruntledGoat 2010-05-21 16:54:33

ansaurus

tags:

views:

answers:

How to highlight parent li text only on :hover?

related questions