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

多分これはあなたが探しているものですか？

$(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 に答える
0

不透明度を 0 に設定する関数を削除しますか?

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

それが間違っている場合は、HTML を表示してみてください

于 2012-04-18T09:35:29.657 に答える