Question

好吧，我正在尝试制作一个按钮，当用户将鼠标悬停在按钮上时，会显示一个包含文本的容器。我想知道如果你把它弹出来的话，是否有可能让弹出的容器保持打开状态。

然而，该线程的答案对我没有帮助，因为它没有解决问题。

我的代码：

HTML：

.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
}

CSS：

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

JQuery：

colspan

Answer 1

尝试this

将您的jQuery代码更新为：

$(document).ready(function(){

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

希望这有帮助!!!

Answer 2

为什么你要重新发明轮子，看看Qtip的功能是否真实：

http://qtip2.com/demos

Answer 3

我在CSS中的您的emailcontainer类，删除color:#fff;，因为它是白色的。或者您可以更改非白色的颜色请看这里的小提琴：https://jsfiddle.net/tn5wy5dk/1/

Answer 4

你可以使用mouseover和mouseout https://api.jquery.com/mouseover/ 如果弹出窗口上没有交叉/关闭按钮，则可以使用mouseout隐藏弹出窗口

Answer 5

jsfiddle DEMO

您可以将按钮div中的.emailcontainer移动到所有位置分享悬停甚至没有额外需要：

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

如果您希望弹出窗口，则需要设置容器 position: relative和弹出窗口position: absolute;：

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

我认为50px不是font-weight的正确值。你要么意为使用font-size: 50px;或类似font-weight: bold;。

Answer 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();
     });  
 });

Jquery悬停 - 保持弹出窗口打开

6 个答案: