CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

How to make text become red color when mouse hover on it for nested list?

a {
  color:black;
}

a:hover {
  color:red;
}
<ol>
          <a href="#"><li>Main1</li></a>
          <a href="#"><li>Main2</li>
          <a href="#"><li>Main3
            <ol>
              <a href="#"><li>Sub1</li></a>
              <a href="#"><li>Sub2</li></a>
              <a href="#"><li>Sub3</li></a>
            </ol>
          </li></a>

          <a href="#"><li>Main4</li></a>
          <a href="#"><li>Main5</li></a>

          <a href="#"><li>Main6</li></a>
        </ol>

When mouse hover on each item, the color of item will become red. However, I got some sub-item under Main3 and when I hover on Main3 only Main3 become red, how to make the number "3" which in front of main3 also become red?

Upvotes: 0

Views: 676

Answers (1)

pdoy
pdoy

Reputation: 101

Can you try this on your css.

ul li a, ol li a {text-decoration: none;}

ul li a:hover, ol li a:hover {color: #E8001F;}

Also, shouldn't it be the other way around?

  • somewhere 1
  • somewhere 2
  • somewhere 3

Upvotes: 1

Related Questions