CODEWITHSUNDEEP
htmlcss
Rocket
Rocket

Reputation: 1093

CSS Highlight list entries

I've created a simple list as follows :

.menu ul {
  font-size:20px;
  margin-left:0;
  list-style: none;
  padding-left:5px;

}

.menu li {
  position: relative;
  padding-left: 3em;
  margin: 0.45em 0;
  list-style: none;
  line-height: 1.8em;
  font-size:20px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li:hover {
  color: #2693ff;
}

.menu li:after {
  position: absolute;
  top: 2.1em;
  left: 0.9em;
  width: 2px;
  height: calc(100% - 2em);
  content: '';
  z-index: 0;
}

.menu li li {
  font-size:20px;
}
    <ul class="menu">
      <li class="menu"><span class="icon-indent"></span>Learn HTML</li>
      <li class="menu"><span class="icon-indent"></span>Create my own web site:
        <ol>
          <li class="menu"><span class="icon-indent"></span>Development Articles</li>
          <li class="menu"><span class="icon-indent"></span>News and Stuff</li>
          <li class="menu"><span class="icon-indent"></span>Funny Cat Pictures</li>
        </ol>
      </li>
      <li class="menu"><span class="icon-indent"></span>PROFIT</li>
      <li class="menu"><span class="icon-indent"></span>PROFIT
      <li class="menu"><span class="icon-indent"></span>Create my own web site:
        <ol>
          <li class="menu"><span class="icon-indent"></span>Development Articles</li>
          <li class="menu"><span class="icon-indent"></span>News and Stuff</li>
          <li class="menu"><span class="icon-indent"></span>Funny Cat Pictures</li>
        </ol>
      </li>
      <li class="menu"><span class="icon-indent"></span>Funny Cat Pictures</li>
    </ul>

Using CSS I can highlight each entry as I hover over it.

However if I hover over the main entry of a nested list or an individual entry within the nested list, all entries within that nested level are highlighted along with it's main entry.

Is there any way to do this so only the entry I'm hovering over is highlighted and not all entries with in the nested list?

FIDDLE HERE showing the issue

Upvotes: 2

Views: 10484

Answers (3)

Nhan
Nhan

Reputation: 3895

https://jsfiddle.net/hba5jgxb/1/

Wrap the text of each item in a tag, then apply CSS hover for it:

<li class='menu'>
  <span class="icon-indent"></span>
  <span class="item-text">Learn HTML</span>
</li>

.item-text:hover {
  color: #2693ff;
}

Upvotes: 7

Annalaxmi
Annalaxmi

Reputation: 133

try this, 

.menu ul {
  font-size: 20px;
  margin-left: 0;
  list-style: none;
  padding-left: 5px;
}
.menu li {
  position: relative;
  padding-left: 3em;
  margin: 0.45em 0;
  list-style: none;
  line-height: 1.8em;
  font-size: 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
ul > li:hover {
  color: #2693ff;
}
ol > li:hover {
  color: #2693ff;
}
.menu li:after {
  position: absolute;
  top: 2.1em;
  left: 0.9em;
  width: 2px;
  height: calc(100% - 2em);
  content: '';
  z-index: 0;
}
.menu li li {
  font-size: 20px;
}
<ul class='menu'>
  <li class='menu'><span class="icon-indent"></span> Learn HTML</li>
  <li class='menu'><span class="icon-indent"></span> Create my own web site:</li>
  <ol>
    <li class='menu'><span class="icon-indent"></span> Development Articles</li>
    <li class='menu'><span class="icon-indent"></span> News and Stuff</li>
    <li class='menu'><span class="icon-indent"></span> Funny Cat Pictures</li>
  </ol>

  <li class='menu'><span class="icon-indent"></span> PROFIT</li>
  <li class='menu'><span class="icon-indent"></span> PROFIT
    <li class='menu'><span class="icon-indent"></span> Create my own web site:</li>
      <ol>
        <li class='menu'><span class="icon-indent"></span> Development Articles</li>
        <li class='menu'><span class="icon-indent"></span> News and Stuff</li>
        <li class='menu'><span class="icon-indent"></span> Funny Cat Pictures</li>
      </ol>
    
    <li class='menu'><span class="icon-indent"></span> Funny Cat Pictures</li>
</ul>

Upvotes: 0

Lidaranis
Lidaranis

Reputation: 785

Set color black on menu li. See if this helps.

.menu li {
    position: relative;
    padding-left: 3em;
    margin: 0.45em 0;
    list-style: none;
    line-height: 1.8em;
        font-size:20px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
     color: #000000; <-- ADD THIS
 }

https://jsfiddle.net/2t3cqr5m/

Upvotes: 4

Related Questions