2

我有一张照片，上面有一些内容（名称、描述、价格），内容在 ul 中。在默认状态下，ul 仅通过将 ul 的绝对位置设置为图像底部，然后使用掩码 div 隐藏溢出来显示名称。然后，当您将鼠标悬停在 ul 上时，只要您停留在图像上，就会向上滑动显示整个信息。当您将鼠标移出时，它会滑回其初始位置，仅显示标题……这就是它应该工作的方式。现在，当您将鼠标悬停时，它会上下滑动，永远上下滑动。

这是html和样式

div.banner_product {
    float: left; width:  236px; position:  relative; overflow: visible;
}
div.banner_product ul {
    width:  220px;
    background-color: black;
    font-size: 16px;
    color:  white;
    list-style-type: none;
    position: absolute; top:  230px;

    margin: 8px;
    filter: alpha(opacity=70); /* internet explorer */
        -khtml-opacity: 0.7;      /* khtml, old safari */
        -moz-opacity: 0.7;       /* mozilla, netscape */
        opacity: 0.7;           /* fx, safari, opera */

}
.mask {
position: absolute;
top: 0;
overflow: hidden;
height:  300px;
width:  235px;
}


/*html*/
<div class="banner_product" id="pi1"><img src="image1.jpg" alt="" border="0" height="306" width="235" /><div class="mask">
        <ul id="bd1">
            <li class="name-b"><a href="#">PRODUCT NAME</a></li>
            <li class="text-b">DESCRIPTION</li>
            <li class="price-b">PRICE</li>
        </ul></div>
    </div>

这是脚本：

$('#pi1')
.bind('mouseover',enterImg)
.bind('mouseout',exitImg)
function enterImg(event){
$('#bd1').animate({"top": "4px"}, 2000);
event.stopPropagation();

}
function exitImg(event){
$('#bd1').animate({"top": "236px"}, 2000);
event.stopPropagation();

}
4

2 回答 2

2

我认为每次#bd1 越过您的鼠标指针（大概是悬停在图像上）时，它会调用 mouseout，然后在它通过时调用 mouseover。

要对此进行测试，请通过指向图像的最底部来激活动画，然后立即将鼠标移开。

编辑：

嗯......对我来说，如果我确保横幅没有越过指针，它会有所帮助，但这当然不是解决办法。

一种解决方案似乎是使用 jQuery 的 hover() 方法而不是特定的鼠标事件：

$('#pi1').hover(
    function (event){
        $('#bd1').animate({"top": "4px"}, 500);
    },

    function (event){
        $('#bd1').animate({"top": "236px"}, 500);
    });

无论如何都可以在 webkit 中使用。没有测试IE。

于 2010-02-03T21:45:23.817 回答
1 
var state = true;
    $('#pi1').hover(function(){
        if(state){
            $('#bd1').slideDown('slow',function(){
                state = false;
            });
        }
    },function(){
        if(!state){
            $('#bd1').slideUp('slow',function(){
                state = true;
            });
        }
    })

使用 jquery slideUp() 和 slideDown() 以及悬停事件停止 redandent 上下移动......这实际上可以在任何使用 mouseover 和 mouseout 事件的地方工作......

于 2011-01-21T12:50:19.313 回答