Home/ Questions/Q 808355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:32:56+00:00

How to highlight Article only on mouse over? current when i hover on Article

  • 0

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</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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0