Only show div when mouse on button

user_6533037 0
Viewed 159

I want a div with text that is only shown when the mouse pointer is set on a specific button.

This is my code:

// Help-text
    $("#help-container")
    .mouseover(function(e) {
        $(this).find("#help-text").fadeIn(100).width("80%");
    })
    .mouseleave(function(e) {
        $(this).find("#help-text").fadeOut(100).width("0%");
    });
#help-container {
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}
#help-container #help-btn {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    background-color: green;
    float: left;
}
#help-container #help-text {
    width: 0;
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  </div>

The display part works fine. But when I leave the button/container the text should just disappear. Instead it triggers a Christmas Eve-effect.

What is wrong with the basic logic in my code?

Edit: There are a lot of answers on Stackoverflow to achieve this. But I'm actually curious why my specific logic ain't working.

css html jquery javascript
3 Answers

You dont need javascript to show and hide the div on hover. You can do it with pure CSS which is much faster.

I have added below CSS that show and hide div on another div's hover:

#help-container #help-btn:hover ~ #help-text{
  display: block;
}

See the below Snippet:

#help-container {
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}
#help-container #help-btn {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    background-color: green;
    float: left;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
#help-container #help-text-container {
    width: 0%;
    display: none;
    overflow: hidden;
    height:75px;
}

#help-container #help-btn:hover ~ #help-text-container{
  display: block;
  animation:widthanim 0.5s normal linear forwards;
}

@keyframes widthanim {
   from { width: 0% }
   to { width: 80%;  }
}
<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text-container"><div id="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div></div>
  </div>

user_84405980

Presuming you want to keep the same element open if moving the mouse from the help block (green) into the section (red).

Simplify it, make the width of the element 100% instead of scaling to 0% and simply use fadeIn and fadeOut, the display:none supersedes width:0 because there is no width on a hidden element. It will work just like yours but not have a trigger loop.

$("#help-container")
  .mouseover(function(e) {
    $(this).find("#help-text").fadeIn(100);
  })
  .mouseleave(function(e) {
    $(this).find("#help-text").fadeOut(100);
  });
#help-container {
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
}

#help-container #help-btn {
  padding: 10px;
  box-sizing: border-box;
  display: inline-block;
  background-color: green;
  float: left;
}

#help-container #help-text {
  width: 100%;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

user_6618720

Try width(0%) instead of width(80%).

Worked for me. Hope it works. Have a nice day.

user_137413260
Related