CODEWITHSUNDEEP
css
shrikanth
shrikanth

Reputation: 179

CSS hovering issue

Please refer this fiddle , http://jsfiddle.net/shrikanth/79AfQ/

After hovering header(h2), div element(popup) is displayed , which is as per design. However I can't navigate to new div.(new div gets disappear soon after moving out h2 element)

Is there any fix for this , so that user can click on headrer then can click on contact of another div element?

HTML 

<h2>What is CSS?</h2>
<div id="popup">
  <a href="#">Contact</a>
</div>

CSS

h2 {
    position:relative;
    top:22px;
    left:44px;
    width: 170px;
    height:33px;
    text-align:center;
}
#popup {
    width: 240px;
    background: #727272;
    padding: 10px;
    border-radius: 6px;
    color: #FFF;
    position: relative;
    top:15px;
    left:44px;
    font-size: 12px;
    line-height: 20px;
    display:none;
}
h2:hover+ #popup {
    display:inline-block;
}
h2:hover {
    background-color:green;
}
#popup:before {
    content:"";
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent #727272 transparent;
    position: absolute;
    top: -15px;
    left: 92px;
}

Upvotes: 0

Views: 65

Answers (2)

Ege
Ege

Reputation: 1202

Another way would be to add the #popup inside the h2 and absolutely position it. This way, when you're hovering over the popup, you'll be hovering over the h2 as well. One thing to note here is not to leave any spaces between h2 and the popup, like ReeceJHayward suggested.

<h2>What is CSS?
<div id="popup">
    <a href="#">Contact</a>
</div>
</h2>

DEMO: http://jsfiddle.net/79AfQ/7/

Upvotes: 0

Reece
Reece

Reputation: 396

Just change the hover pseudo-selector rule to include the #popup element, too (assuming your goal is just to be able to click the contact link in the #popup)

h2:hover+ #popup, #popup:hover{
   display:inline-block;
}

If you want to use this approach, I suggest adding padding to the h2 element to allow your mouse to leave it without immediately deactivating the hover state, or wrapping it with a larger, invisible element.

Upvotes: 2

Related Questions