1

私が達成したいのは、マウスを画像の上に置くと、不透明度が半分になることです。ここで明らかな間違いをしているに違いありませんが、正確にはわかりません。どんなヒントでもいただければ幸いです。

http://jsfiddle.net/bUHVc/1/

   <a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>

 $('.arrow').hover(
function() {
     $(this).find('img').fadeTo('slow', 0.5);
},
function() {
     $(this).find('img').fadeTo('slow', 1);
 }
);
4

3 に答える 3

8

より良い解決策は、javascript を追加せずに simpleCSSで実行することです。そのため、クラスを追加するだけで、次のようなすべての画像で実行できます。

.arrow:hover {
  opacity: 0.5;
}

ゆっくりとしたトランジションが必要な場合は、ここを見て効果をカスタマイズできます。

于 2013-10-21T22:41:24.767 に答える
0

私はあなたのjsfiddleを更新しました - http://jsfiddle.net/bUHVc/6/

jquery のインクルードがありませんでした。また、コードに find("img") 行は必要ありませんでした。animate() 関数を使用して、探しているものを簡単に実現できます。

jQuery

$(".arrow").hover(function(){
   $(this).stop().animate({"opacity": "1"}); 
}, function(){
   $(this).stop().animate({"opacity": "0.5"});
});

CSS:

.arrow{
   opacity: 0.5;
}

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>
于 2013-10-21T22:46:36.623 に答える
0

jQuery を含める必要があります。また、を削除し.find()てクラス名を img 要素に移動するか、.children()代わりに使用します。

更新されたフィドル: http://jsfiddle.net/bUHVc/3/

于 2013-10-21T22:40:31.260 に答える