Trying to display div on hover but nothing works

Question

I need to show hidden-cats div on hover categories

#html

<li  class="menu-button"><a href="categories/" class="menu-button" id="categories">cats</a></li>

<div id="hidden-cats">
<ul>
    <li class="cats-li"><img src="https://i.imgur.com/aTsiQPR.png" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
</ul>
</div>

#css i tried but nothing works

    #categories:hover + #hidden-cats {
        display: block;
    }
    #categories:hover > #hidden-cats {
        display: block;
    }
    #categories:hover  #hidden-cats {
        display: block;
    }
    #categories:not(:hover) + #hidden-cats {
        display: none;
    }

you mean change #categories:hover to .menu-button:hover – Gurami Nikolaishvili Oct 22 '20 at 18:05 — Gurami Nikolaishvili, Oct 22 '20 at 18:05

score 0 · Answer 1 · answered Oct 22 '20 at 18:06

id:hidden-cats and class:menu-button are siblings so css should be like that way.

#hidden-cats {
  display: none;
}

.menu-button:hover+#hidden-cats {
  display: block;
}

<li class="menu-button">
  <a href="categories/" class="menu-button" id="categories">cats</a></li>

<div id="hidden-cats">
  <ul>
    <li class="cats-li"><img src="https://i.imgur.com/aTsiQPR.png" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
  </ul>
</div>

score 0 · Answer 2 · answered Oct 22 '20 at 18:06

#categories is inside a <li> element, so #hidden-cats cannot be its next sibling element and you cannot use + selector in this situation. You must change your HTML structure. Can you move your id="categories" on the <li>?

Then this will work:

#categories:hover + #hidden-cats {
    display: block;
}

score 0 · Answer 3 · answered Oct 22 '20 at 18:08

With the current styles that has been written, you can move the hidden cats,inside the li element

<ul>
        <li  class="menu-button">
            <a href="categories/" class="menu-button" id="categories">cats</a>
                <div id="hidden-cats">
                <ul>
                    <li class="cats-li"><img src="https://i.imgur.com/aTsiQPR.png" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
                </ul>
                </div>
            </li>
    </ul>

score 0 · Answer 4 · answered Oct 22 '20 at 18:13

Try this

img {
  width: 30px;
}
.cats {
  display: none;
}
.menu-button:hover~.cats{
  display: block;
}

<li  class="menu-button">
<a href="categories/" class="menu-button" id="categories">cats</a></li>

<div id="hidden-cats" class="cats">
<ul>
    <li class="cats-li"><img src="https://i.picsum.photos/id/1029/4887/2759.jpg?hmac=uMSExsgG8_PWwP9he9Y0LQ4bFDLlij7voa9lU9KMXDE" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
</ul>
</div>

Trying to display div on hover but nothing works

4 Answers4