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

How to darken background when hovering on image

本文关键字：何使 背景 图像 悬停      更新时间：2023-09-26

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

目标是;

  1. 滚动框时，它显示"图表"

  2. 滚动框时，框会呈现黑色背景。

js小提琴

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

我需要在滚动时显示为黑色变暗的图像，不透明度为 50%。

我不确定这是否是您想要的，但请尝试以下操作：

编辑

演示

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

小提琴

.JS： 

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

$(".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','');
})
相关文章：