How to highlight parent li text only on :hover?
How to highlight Article only on mouse over? current when i hover on Article it highlights all child item also. Is it possible to highlight Articles only
see example here http://jsbin.com/ubunu/2
<style>
li:hover {background:red}
li li:hover {background:yellow}
</style>
</head>
<body>
<p id="hello">Hello World</p>
<ul>
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox<开发者_如何学C/li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
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.
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.
加载中,请稍侯......
精彩评论