CODEWITHSUNDEEP
javascriptjqueryhtmlcss
NoobieNoob
NoobieNoob

Reputation: 907

Hovering over two DIVs

I have a div (headline) and another div (button) that appears when you hover over the headline. When you leave the headline, the button should disappear.

In my current code the button disappears when you move your cursor to it. Do you have any ideas how to keep the button displayed when you hover over headline or button, so that the button is clickable?

Thanks.

fiddle: http://jsfiddle.net/L6jtotog/

CSS:

.headline {
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 5px;
    width: 70%;
    position: relative;
}

#button{
    display: none;
    position: absolute;
    top: 5px;
    right: 100%;
    margin-right: 10px;
}

HTML:

<div>
    <div class="headline" onmouseover="func(true)" onmouseout="func(false)">Headline 1 <div id="button">Test</div></div>

JS:

function func(showPanel) {
    if(showPanel) {
        $("#button").show();
    }
    else {
        $("#button").hide();
    }
}

Upvotes: 1

Views: 470

Answers (2)

divinemaniac
divinemaniac

Reputation: 277

When you set the position attribute of #button to absolute, position:absolute; it makes the browser think that #button is outside of the div .headline That is why when the mouse cursor reaches over #button, the browser actually thinks it is outside the .headline and thus, invokes the onmouseout function. This is why you are getting this problem.

You might want to remove position:absolute from #button and use position:relative.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Instead of using something like that, you can do everything with CSS alone!

.headline {
  background-color: grey;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 5px;
  width: 70%;
  position: relative;
}

#button{
  display: none;
  position: absolute;
  top: 5px;
  left: -50px;
  margin-right: 10px;
  padding-right: 50px;
}

.headline:hover #button {
  display: block;
}
<div>
  <div class="headline">
    Headline 1
    <div id="button">Test</div>
  </div>
</div>

And in your case, when you need to go to Test, it calls the mouseout which cancels the hover. So I gave an extra padding. Now you can go over the text.

Upvotes: 5

Related Questions