jQueryで透明なイメージを作成するには？

Question

マウスポインタがB画像 の上にあるときにA画像を透過的にして、どちらかの画像を見ることができます。

これはどのように変更する必要がありますか？

Answer 1

のホバーイベントで、あなたはここにコードを掲示に問題がある場合は、thisをお読みください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

このデモはいくつかの可能性を示すために簡略化されています。

• display

• visibility（画像Aを参照してください。

  • jQueryの.css()を用いmouse eventsの数（画像Bを参照）

  • を有し、次のようなプロパティを変更することができ）

  • opacity

• あなたがhide()とshow()addClassを使用し、その後、

• を（画像Cを参照）、または前述の特性を有する対象の要素にクラスを割り当ててみてくださいjQueryのメソッドを使用することができますし、 removeClass（画像Dを参照）

スニペット

$(function() { 
 
    $('.B').mouseover(function() { 
 
    $('.A').css('visibility', 'hidden'); 
 
    $('.C').hide(); 
 
    $('.D').addClass('invisible'); 
 
    }); 
 
    $('.B').mouseleave(function() { 
 
    $('.A').css('visibility', 'visible'); 
 
    $('.C').show(); 
 
    $('.D').removeClass('invisible'); 
 
    }); 
 
});

.invisible { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img src="http://placehold.it/100x100/000/fff?text=A" class="A"> 
 
<img src="http://placehold.it/100x100/00e/fc1?text=B" class="B"> 
 
<img src="http://placehold.it/100x100/fc1/00e?text=C" class="C"> 
 
<img src="http://placehold.it/100x100/e0e/fcf?text=D" class="D">

Answer 2

あなたはここに

$("img").bind("mouseover", function() { 
    $("img").css("opacity", "0.5"); 
    $(this).css("opacity", "1"); 
}); 

画像を透明にするためにCSSの不透明度プロパティを使用することができますJSFiddleへのリンクです：https://jsfiddle.net/8hbmyu9k/2/

Answer 3

あなたは、画像のホバーイベントで画像のopacity valueを変更することができますB.

img.transparent 
{ 
    opacity: 0.3; filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */ 
} 

今すぐ画像B（クラスBとimgタグ）

$("img.B").hover(function(){ 
    $("img.A").addClass("transparent");  
},function(){ 
    $("img.A").removeClass("transparent");  
});