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を呼び出していると思います。

これをテストするには、画像の一番下をポイントし、すぐにマウスを邪魔にならないように動かして、アニメーションをアクティブにします。

編集：

うーん...私にとって、バナーがポインターと交差しないことを確認すれば、それは役に立ちましたが、もちろんそれは修正ではありません。

1つの解決策は、特定のマウスイベントの代わりに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()をホバーイベントと一緒に使用して、冗長な上下移動を停止します...これは実際には、mouseoverおよびmouseoutイベントが使用されている場所ならどこでも機能します...

于 2011-01-21T12:50:19.313 に答える