0

次のようなメニューのセットがあります。

<ul class="lavalamp">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
        Menu 3
        <ul>
            <li>Sub Menu 1</li>
            <li>Sub Menu 2</li>
            <li>Sub Menu 3</li>
        </ul>
    </li>
    <li>Menu 4</li>
</ul>

これにラバランプ効果を加えます。メニューにカーソルを合わせると、lavalamp の背景がホバーされたメニューに移動し、メニューがホバーされていない場合は現在のメニューに戻ります。

問題は、サブメニューにカーソルを合わせると、メニューにカーソルを合わせていないと見なされるため、ラバランプの背景が現在のメニュー項目に戻ることです。これを防ぐために、次のように jquery.lavalamp.js にホバー セレクターを追加します。

$li.not(".back").hover(function() {
    if (!$('.sub-menu').is(":hover")) {
    move(this);
    }
}, function(){});

function move(el) {
    $back.each(function() {
        $(this).dequeue(); }
    ).animate({
        width: el.offsetWidth,
        left: el.offsetLeft
    }, o.speed, o.fx);
};

一方、 move(this) は、溶岩ランプの背景をホバーしたメニューに移動する関数です。IE を除くすべてのブラウザで問題なく動作します。lavalamp の背景が動かず、"unsupported pseudo:hover" という JavaScript エラーが発生します。jquery サイトで検索しましたが、:hover というセレクターがありません。

上記の :hover セレクターを置き換える他の方法はありますか? どんな助けでも大歓迎です。

4

2 に答える 2

2

as:hoverは、スクリプトを介して静的に推論することが非常に難しいことで知られています (また、古い IE は s 以外の疑似クラスをサポートしていません<a>)。jQueryhover()メソッドを使用して実際のクラスを強制し、代わりにそれを使用することをお勧めします。

$li.hover(function(){
  $(this).toggleClass('hover');
});

次に、2 行目を置き換えます。

if (!$('.sub-menu').is(":hover")) {

...これとともに：

if(!$(this).closest('.hover').length){

...代わりに、クラスで祖先を探しているjQueryオブジェクトhoverが要素を返すかどうかをテストします。

于 2013-01-31T09:45:31.093 に答える
0

このコードを使用してください。

var previousClass = '';
var arr= $("li");
$.map(arr, function(li){
 li.mouseout(function (li) {
                    eventMouseOut(li);
                });
 li.mouseover(function (li) {
                    eventMouseOver(li);
               });
});
 function eventMouseOver(_this) {
            previousClass = $(_this).attr("class");
            $(_this).removeClass().addClass("Hover");
        }
 function eventMouseOut(_this) {

            var count = 1;
           var arr= $("li");
            $.map(arr, function (li) {
                $(li).removeClass().addClass("Normal");
                count++;
            });
        }
于 2013-01-31T09:29:49.390 に答える