CODEWITHSUNDEEP
htmlcss
abcid d
abcid d

Reputation: 2963

CSS - Hover on li a

I have HTML and CSS below.

HTML

<ul>
    <li class="liHover">
        <a href="">Hover List</a>
        <div class="square1">
        Square 1
        </div>
    </li>
    <li class="aHover">
        <a href="">Hover Link</a>
        <div class="square2">
        Square 2
        </div>
    </li>
</ul>

CSS 

li {padding:20px; border: solid 1px;margin:5px;}

.square1, .square2 {
  display: none;
  width: 200px;
  height: 100px;
  border: 1px solid red;
}
.liHover:hover .square1 {
  display: block;
}
.aHover a:hover .square2 {
  display: block;
}

Live sample is here

If I have hover on li, it works, but if I move the hover to li a:hover, it doesn't work.

Below code is working.

.liHover:hover .square1 {
  display: block;
}

But this below code doesn't work.

.aHover a:hover .square2 {
      display: block;
    }

I wonder why? and how to make it work?

Upvotes: 1

Views: 67

Answers (1)

Jimmy Hedstr&#246;m
Jimmy Hedstr&#246;m

Reputation: 571

It's because neither .square1 or .square2 is a child of any a tag. Either add .square1 or .square2 class to the a tag, or make the a to parent over them.

Upvotes: 1

Related Questions