Question

我有几个同班的类似div。我准备了一个JavaScript来更改悬停时的几个CSS值，问题是，当我悬停其中一个框时，所有具有相同ID和类的框都将受到影响，而我只想修改实际悬停的框。 / p>

HTML

<div class="gameBox" id="gameBox">
            <img src="https://yggdrasilgaming.com/wp-content/uploads/2016/12/yggdrasil-slot-empire-fortune.png" class="gameBoxBg"/>
            <h3 class="gameBoxText">Empire Fortune</h3>
            <div class="downloadCentralizer">
                <img class="downloadLink rightSpace" id="downloadLink" src="https://www.kuboland.com/atm2u/images/googlePlay.png"/>
                <img class="downloadLink leftSpace" id="downloadLink" src="https://www.kuboland.com/atm2u/images/apple.png"/>
            </div>
        </div>

JAVASCRIPT

$("#downloadLink, .gameBoxBg, .gameBoxText").hover(function(){
    $(".gameBoxBg").css("filter", "blur(4px)");
    $(".gameBoxText").css("opacity", "1");
    $(".gameBoxText").css("display", "block");
    }, function(){
    $(".gameBoxBg").css("filter", "blur(0px)");
    $(".gameBoxText").css("opacity", "0");
    $(".gameBoxText").css("display", "none");
});

有人可以告诉我如何解决吗？谢谢！

Answer 1

在.gameBox选择器上添加事件侦听器。接下来，在事件正文中，找到它的子项，然后根据需要进行修改。

$(".gameBox").hover(function() {
    $(this).find(".gameBoxBg").css("filter", "blur(4px)");
    $(this).find(".gameBoxText").css("opacity", "1");
    $(this).find(".gameBoxText").css("display", "block");
}, function() {
    $(this).find(".gameBoxBg").css("filter", "blur(0px)");
    $(this).find(".gameBoxText").css("opacity", "0");
    $(this).find(".gameBoxText").css("display", "none");
});

在您的代码中，$(".gameBoxBg")将导致所有具有相同选择器的DOM（跨所有框）。您只需要一个，即当前悬停的DOM内部的一个，这就是在这里使用$(this).find(".gameBoxBg")的原因。

Answer 2

我在上面也同意，您也有2个具有相同ID的元素。 ID值在整个文档中应该是唯一的

悬停时，只需从同一个班级的几个班次中更改一个Div

2 个答案: