이미지 위로 마우스를 가져 가면 배경을 어둡게하는 방법

Question

jQuery 호버 버튼을 만들었습니다. 박스 위로 마우스를 가져 가면 jQuery 버튼이 나타납니다. 그러나 작동하지 않습니다. 누군가가 나를 위에 h을 때 상자에 검은 배경을 추가하는 방법을 보여줄 수 있습니까?

목표는 다음과 같습니다. 상자 롤오버 할 때

1. 상자를 통해 압연, 그것은

2. "BTN를 차트"가 표시 박스는 검은 색을 가져옵니다.

   jsFiddle

   /* CHART IT BTN ON POTS 
   ===================================================================*/ 
   $(".btn-trigger").hover(function() { 
       $(this).find(".charthis-btn").show(); 
   }, function() { 
       $(this).find(".charthis-btn").hide(); 
   }) 
   

는 I 롤오버 할 때 50 %의 불투명 검정색 어둡게 표시되는 화상을 필요로한다.

Answer 1

나는 당신이 원하는 거라면 모르겠지만이 시도 :

편집

DEMO

$(".display-box").hover(function() { 
    $(this).find(".charthis-btn").show(); 
    $(this).find(".hover-mask").fadeIn(); 
}, function() { 
    $(this).find(".charthis-btn").hide(); 
    $(this).find(".hover-mask").fadeOut(); 
}) 

Answer 2

FIDDLE

JS는 :

$(".display-box").hover(function() { 
$(this).find(".charthis-btn").show(); 
}, function() { 
$(this).find(".charthis-btn").hide(); 
}) 

Answer 3

$(".display-box").hover(function() { 
$(this).find(".charthis-btn").show(); 
}, function() { 
$(this).find(".charthis-btn").hide(); 
}) 
$(".charthis-btn").on('mouseenter',function(){ 
$(".display-box img").css('opacity','0.5'); 
}) 
$(".charthis-btn").on('mouseout',function(){ 
$(".display-box img").css('opacity',''); 
})