1

ホバー機能を実装したので、星の上にカーソルを置くと、これと以前のすべての兄弟に addclass メソッドが適用されます

$(document).ready(function(){
 $('.ratings li').hover(function(){
  $(this).prevAll().andSelf().addClass('goldstar');
 });
});

現時点で何が起こるかというと、4 番目の星 (5 つある) にカーソルを合わせると、4 番目とすべての兄弟にクラスが適用されます。

私が達成したいのは、ホバー状態を離れると、li が元の状態に戻ることです。または、ホバーがマウスのフローにさらによく従うので、li の上にホバーすると、クラスが適用されます (意味があることを願っています)。 )

Jsfiddleをまとめましたが、パスが公開されているにもかかわらず、何らかの理由で画像が表示されませんか?

4

4 に答える 4

1

あなたはこれを行うことができます：

 $('.ratings li').hover(function(){
   $(this).prevAll().addBack().addClass('goldstar');
 }, function(){
   $('.ratings li').removeClass('goldstar');
 });

andSelf非推奨のを に置き換えたことに注意してくださいaddBack。andSelf古いバージョンの jQuery を使用している場合は許可する場合があります。

画像の問題をどのように回避したかにも興味があるかもしれません...

デモンストレーション

于 2013-02-20T14:25:52.563 に答える
1 
$(document).ready(function(){
 $('.ratings li').hover(function(){
 function () {
    // Run on Mouse over
    $(this).prevAll().andSelf().addClass('goldstar');
  },
  function () {
    // Run on Mouse out
    $(this).removeClass('goldstar');
  }
 });
});
于 2013-02-20T14:26:03.030 に答える
1

マウスJSFiddle の例の後に星からクラスをクリアします。

$(document).ready(function(){
    $('.ratings li').hover(function(){
        $(this).nextAll().removeClass('goldstar');
        $(this).prevAll().andSelf().addClass('goldstar');
    });
    $('.ratings ul').mouseout(function(){
       $('li', this).removeClass('goldstar'); 
    });
  });

更新: マウスアウト時にすべての星を削除

于 2013-02-20T14:26:28.460 に答える
1

Javascript

$(document).ready(function(){
    $('.ratings li').hover(function(){
        $(this).prevAll().andSelf().addClass('goldstar');
    // add a function for when the hover ends...
    },function(){
        $(this).siblings().andSelf().removeClass('goldstar');
    });
});

CSS

background-image: url("http://i.stack.imgur.com/S5T0M.png");

ワーキングデモ

于 2013-02-20T14:26:55.607 に答える