-4

Easy to explain. I want to make something like dropdown menu. When I hover on element (for example ) - appears div block, which disappears on leaving <a> element or div block.

<a>Element to hover</a>
<div>I'm not gonna disappear until u leave me or my <a> bro</div>

I hope it would be easy for you guys to help me. Thanks in advance!

What have I tried? I went by the simplest way, but this doesn't work as I wanted. I did it in css, smth like

 a:hover div {
display: block;
}

But when I leave div, it disappears. So I need the other solution? How can I do this?

ex1t3
  • 55
  • 12

1 Answers1

1

Here's what a simple CSS solution would look like using the sibling selector.

.nav
{
  border: 1px solid black;
  padding: 1px;
}

.nav:hover + .menu, .menu:hover
{
  display: block;
}

.menu {
  display:none;
  border: 1px solid black;
  padding: 1px;
}
<a class="nav">Element to hover</a>
<div class="menu">I'm not gonna disappear until u leave me or my a bro</div>
abney317
  • 7,760
  • 6
  • 32
  • 56
  • you should include the reference to the original [post](https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a) – Muhammad Omer Aslam Dec 06 '17 at 22:50
  • Thanks alot man! U didn't waste ur time for teaching me how to describe my problem, but just helped me. Wish u luck – ex1t3 Dec 06 '17 at 22:50
  • @MuhammadOmerAslam that post is not actually what i was looking for – ex1t3 Dec 06 '17 at 22:52
  • the message was for @abney317 and yes that post includes the answer you are loking for – Muhammad Omer Aslam Dec 06 '17 at 22:53
  • 1
    @MuhammadOmerAslam That post doesn't include keeping the div open when it is hovered over as well. Similar question though. Looks like the 2nd highest voted answer in that is what he was looking for. – abney317 Dec 06 '17 at 22:56
  • 1
    @abney317 Nah, man, there div is included in other div. In my case, these two elements are separated – ex1t3 Dec 06 '17 at 23:02