Jquery hover - keep popup open

问题

Well, I am trying to make a button which, when a user hovers on it, will display a container which has text in it. And I am wondering if it is possible to have the container which pops up stays open if you hover down to it.

It is similar to this question:

However the answer on that thread does not help me, as it does not solve the issue.

My code:

HTML:

<a href="#contact">
    <div class="button">
       <div class="button-text contactme">
            Contact me
        </div>
    </div>
</a>
<div class="emailcontainer">
    contact@website.com
</div>

CSS:

.emailcontainer {
    display:none;
    color:#fff;
    border:solid 1px #fff;
    padding:10px;
    padding-left:50px;
    padding-right:50px
}

.button-text {
    padding:0 25px;
    line-height:56px;
    letter-spacing:3px
}

.button-text.contactme {
    font-weight:20px
}

JQuery:

$(document).ready(function(){
    $(".button-text.contactme").hover(function() {
    $('.emailcontainer').show('slow')
},function() {
    $('.emailcontainer').hide('slow')
    });  
});

回答1:

try this

Update your jQuery code as:

$(document).ready(function(){

$(".button-text.contactme, .emailcontainer").hover(function() {
    $('.emailcontainer').show('slow')
},function() {
        setTimeout(function() {
        if(!($('.emailcontainer:hover').length > 0))
            $('.emailcontainer').hide('slow');
        }, 300);
    });  
});

Hope this help!!!

回答2:

Why you are trying to reinvent the wheel, have a look Qtip with verity of feature:

http://qtip2.com/demos

回答3:

I your emailcontainer class in CSS, remove the color:#fff;, because it is white. Or you can change the color which is not white see fiddle here: https://jsfiddle.net/tn5wy5dk/1/

回答4:

you may use mouseover and mouseout https://api.jquery.com/mouseover/ If you do not have a cross/close button on the popup then you can use mouseout for hiding the popup

回答5:

jsfiddle DEMO

You can move the .emailcontainer inside your button div so it'll share the hover even nothing extra needed:

<div class="button-text contactme">
    Contact me
    <div class="emailcontainer">contact@website.com</div>
</div>

If you want it to be popup, you need to set the container to have position: relative and the popup to have position: absolute;:

.button-text.contactme {
    position: relative;
}
.emailcontainer {
    position: absolute;
    top: 40px;
    left: 20px;
    /* the rest of styles */
}

I don't think 50px is a proper value for font-weight. You either meant to use font-size: 50px; or something like font-weight: bold;.

回答6:

HTML CODE

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app2.js"></script>

<style>
.emailcontainer {
    display:none;
    color:blue;
    border:solid 1px black;
    padding:10px;
    padding-left:50px;
    padding-right:50px
}

.button-text {
    padding:0 25px;
    line-height:56px;
    letter-spacing:3px
}

.button-text.contactme {
    font-weight:20px
}

</style>
</head>

<body> 
  <a href="#contact">
      <div class="button">
         <div class="button-text contactme">
              Contact me
          </div>
      </div>
  </a>
  <br/>
  <div id="emailcontainerdiv" class="emailcontainer">
      contact@website.com
  </div> 




</body>
</html>

Javascript

$(document).ready(function(){
     $(".button-text.contactme").hover(function() {
         $('#emailcontainerdiv').show();
       },function() {
     $('#emailcontainerdiv').show();
     });  
 });

来源：https://stackoverflow.com/questions/30084561/jquery-hover-keep-popup-open

标签

javascript

jquery

html

css