Question

  $(document).ready(function() {
        //If Javascript is running, change css on product-description to display:block
        //then hide the div, ready to animate
        $("div.pop-up").css({'display':'block','opacity':'0'})

        $("a.trigger").hover(
          function () {
            $(this).prev().stop().animate({
              opacity: 1
            }, 500);
          },
          function () {
            $(this).prev().stop().animate({
              opacity: 0
            }, 200);
          }
        )
      });

我有10个div（触发器）水平排列，当悬停在触发元素弹出窗口时出现但想留在弹出窗口内容我该怎么做？

Answer 1

取消将不透明度设置为0的功能？

http://jsfiddle.net/mynameisdonald/m2ku9/

如果那不对，请尝试向我们展示您的HTML

Answer 2

也许这就是你要找的东西？

$(document).ready(function() {
        $(".pop-up").css({'display':'block','opacity':'0'})

        var timer;
        $(".trigger, .pop-up").on({
            mouseenter : function () {
              clearTimeout(timer);
              $(this).prev().stop().animate({
                 opacity: 1
              }, 500);
            },
            mouseleave: function () {
                var self = this;
                timer = setTimeout(function() {removeHover(self);}, 20);
            }
         });

         function removeHover(elm) {
             var element = $(elm).is('.pop-up') ? $(elm) : $(elm).prev();
             element.stop().animate({
                 opacity: 0
              }, 200);
         }
});

FIDDLE

Answer 3

这里有一点点不同的解决方案http://jsfiddle.net/9DD3v/

您可以通过li

等链接的父级触发事件

HTML

<ul>
<li>
    <a href="#" class="trigger">Show</a>
    <div class="profile">


    <div class="pop-up">
 <div style="margin-top:7px;position:absoult;left:0" ><font color=#f6f907 size=+1><b>Ii</b></font></div>nt.<br>Email :&nbsp;&nbsp;<a href=mailto:d@nt.com>d@nt.com </a> <br>
Website :&nbsp;&nbsp;<a href=http://www.nt.com>www.nt.com</a>
</div>
</li>
        <li>
    <a href="#" class="trigger">Show</a>
    <div class="profile">


    <div class="pop-up">
 <div style="margin-top:7px;position:absoult;left:0" ><font color=#f6f907 size=+1><b>Ii</b></font></div>nt.<br>Email :&nbsp;&nbsp;<a href=mailto:d@nt.com>d@nt.com </a> <br>
Website :&nbsp;&nbsp;<a href=http://www.nt.com>www.nt.com</a>
</div>
</li>
            </ul>

CSS

ul li {display:relative;float:left;margin-left:10px;}
div.profile{

    display: none;
    text-align: left;
    position: absolute;
    z-index:9999;
    margin-top: ;
    margin-left: ;
    width: 300px;
    height: 100px;
    padding: 0px 10px;
    overflow:hidden;
    background:#222222 no-repeat; 
    color: #ffffff;
    border: 1px solid #1a1a1a;
    font-size: 90%;
    border:none;
}

JS

$(function(){
    $("li").hover(function(){
          $(this).children("div").stop().show(500);        
    },function(){
          $(this).children("div").stop().hide(500);            
    })
});

我有10个div（触发器）水平排列，当悬停在触发器元素弹出窗口出现但想要保持弹出内容我该怎么做？

3 个答案: