0 
  $(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（触发器）水平排列，当悬停在触发元素弹出窗口上但想留在弹出内容上时，我该怎么做？

4

3 回答 3

0

去掉将不透明度设置为0的函数？

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

如果那是错误的，请尝试向我们展示您的 html

于 2012-04-18T09:35:29.657 回答
0

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

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

小提琴

于 2012-04-18T09:43:24.200 回答
0

这里有点不同的解决方案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);            
    })
});
于 2012-04-18T10:59:38.667 回答