How to make text of nested item become red when mouse over?

Question

a:hover, li: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>

I have a nested order list. When I mouse hover on each item and text will become red. However, when I mouse over the sub item, the number of main will also become red.

(example, when I hover on sub1 the number "3" of main3 will also become red)

How to fix it? am I doing something wrong?

score 2 · Answer 1 · edited May 23 '17 at 12:14

You have a few issues in your code.

1: You need to close your anchor tag around Main2, otherwise technically the entire rest of the page is part of that link.

2: I could be wrong, but I'm pretty sure you're not allowed to have anything as a child of an OL or UL except LI (so it should be <li><a>linked list item</a></li> instead of <a><li>linked list item</li></a>). (See the accepted answer to this question on nested lists: Proper way to make HTML nested list?)

3: your CSS rule says "If I hover over list items make them red. Also if I hover over anchors make them red." Since your sub list is nested within a list item in your main list, when you hover over the sub list, you are technically hovering over the 3rd list item in the main list (see this fiddle I made just for you to demonstrate what I mean: http://jsfiddle.net/pah3gstn/2/).

That also means that if you were to click on one of those sub links with how you had the anchor tags set up before, they would all click through to the link that Main3 is supposed to go to.

4: Once you fix the structure of your list (issues 1, 2, & 3) you can change your css to a:hover {color:red;}, because then you only need to change the color on the specific link you're hovering over.

I fixed all of those issues for you so you can see it working here : http://jsfiddle.net/pah3gstn/

Keammoort · Answer 2 · 2015-07-16T21:23:27.760

Why don't you change your DOM a little bit to this (just matched starting and ending tags):

<ol>
  <a href="#"><li>Main1</li></a>
  <a href="#"><li>Main2</li></a>
  <a href="#"><li>Main3</li></a> <!-- closed list element here-->
    <!-- this list is standalone element, not included inside li -->
    <ol>
        <a href="#"><li>Sub1</li></a>
        <a href="#"><li>Sub2</li></a>
        <a href="#"><li>Sub3</li></a>
    </ol>
  <a href="#"><li>Main4</li></a>
  <a href="#"><li>Main5</li></a>
  <a href="#"><li>Main6</li></a>
</ol>

And only apply color on links:

a:hover {
  color: red;
}

fiddle

score 0 · Answer 3 · answered Jul 16 '15 at 21:15

0

How about this? It wont change the color of your number, though...

HTML:

<ol>
  <li><a href="#">Main1</a></li>
  <li><a href="#">Main2</a></li>
  <li><a href="#">Main3
    <ol>
        <li><a href="#">Sub1</a></li>
        <li><a href="#">Sub2</a></li>
        <li><a href="#">Sub3</a></li>
    </ol>
  </a></li>
</ol>

CSS:

 a:hover {
    color: red;
 }

**Keammoort's solution keeps the color changing.

answered Jul 16 '15 at 21:15

Josh Salazar

412
2
10

but when I hover on main3 the number "3" of it will not be red – Dreams Jul 16 '15 at 21:19
1

If you close your Main3 link before the nested OL, that'll fix the issue of the list number changing color when you hover over the nested list. – Bmd Jul 16 '15 at 21:25

score 0 · Answer 4 · answered Jul 16 '15 at 21:34

If you are willing to use it jQuery is the easiest way not to hack this together because of the parent function.

See this fiddle https://jsfiddle.net/z46dj34x/

Your a should not be outside of the li so I changed that as well

HTML

<ol>
    <li><a href="#">Main1</a></li>
    <li><a href="#">Main2</a></li>
    <li><a href="#">Main3</a>
        <ol class="sub-menu">
            <li><a href="#">Sub1</a></li>
            <li><a href="#">Sub2</a></li>
            <li><a href="#">Sub3</a></li>
        </ol>
  </li>
</ol>

jQuery

$('ol li a').hover(         
    function () {
        $(this).css({"color":"red"});
        $(this).parent().css({"color":"red"});
    }, 

    function () {
        $(this).css({"color":"black"});
        $(this).parent().css({"color":"black"});
    }
);

CSS

li, li a {
    color:black;
}

How to make text of nested item become red when mouse over?

4 Answers4