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

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

小提琴_

JS：

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

Answer 2

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

编辑

演示

$(".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','');
})