悬停在图像上时如何使背景变暗

Question

我创建了一个jQuery悬停按钮。将鼠标悬停在框上时，会出现一个jQuery按钮。但是，它不起作用。有人可以告诉我如何在悬停时将黑色背景添加到框中吗？

目标是;

1. 滚动框时，会显示“chart it btn”

2. 滚动框时，框会变成黑色背景。

jsFiddle

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

我需要显示的图像在翻转时变暗为黑色，不透明度为50％。

Answer 1

FIDDLE

JS：

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

Answer 2

我不确定这是不是你想要的但是试试这个：

修改

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 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','');
})