Html 将鼠标悬停在其他div上时更改div

我试图改变一个div悬停在另一个div上时的可见性。当查看器悬停在图像上时，我希望悬停的图像展开，而另一个图像的文本框不可见。这是我的HTML：

    <div id="Image1" class="Images">
        <img src="img/IMG_0212.JPG" width=200px height=auto>
        <p> Image 1 text </p>
    </div>

    <div id="Image2" class="Images">
        <img src="img/IMG_0169.JPG" width=200px height=auto>
        <p> Image 2 text </p>
    </div>

---

请容忍我，因为我对HTML和CSS还是相当陌生的。到目前为止，我发现的一切似乎都需要嵌套div或使用Jquery。仅使用HTML和CSS有什么方法可以实现这一点吗？

如果使用javascript，很容易，您可以执行以下操作：

$('#Image1').hover(function(){
   $('#Image2').hide();
   enlarge_image($('#Image1'));
});
enlarge_image= function(image_arg){
//change height and width here
};

---

希望对您有所帮助

您可以使用jquery

hover

来实现这一点-

这是小提琴-

hover接受2个回调函数- $（选择器）。悬停（handlerIn，handlerOut）

将鼠标光标移入时调用handlerIn，将光标移出时调用handlerOut

如果您有任何疑问，请告诉我。

使用jquery尝试以下操作：

$("img").mouseenter(function(){
    $("img").hide();
    $(this).css("transform" , "scale(1.5)");
    $(this).show();
}).mouseout(function(){
    $(this).css("transform" , "scale(0.5)");
    $("img").show();
});

---

希望这能有所帮助。

不。仅仅使用CSS是没有办法的

您可以使用JQuery来完成它，就像其他答案所建议的那样。如果您不喜欢使用该库，可以使用纯Javascript

首先，创建两个类：

.own\u hover

和

.other\u hover

在CSS上创建与现有样式相同的样式，但将其应用于以下类别：

.other_hover {
    transform: scale(0.5);
    visibility: hidden;
}

.own_hover {
    transform: scale(1.5);
    visibility:visible;
}

（请注意，此CSS将使其他图像不可见，而不是文本框。您可能希望将其更改为完成所描述的行为）

现在，只需使用一些纯Javascript，您就可以在图像中添加一个事件侦听器：

document.getElementsByClassName("Image").forEach(function(e){
    e.addEventListener("mouseenter", imageChanger);
    e.addEventListener("mouseleave", imageEqualizer)
}

然后创建一个函数来添加相应的类（然后删除它们）

只需大约15行JS，您就可以完成您想要的任务

我还没试过，但这就是我解决你问题的方法。您可以尝试、失败、调试，然后重新开始，直到找到所需的解决方案

如果图像列表没有改变，请不要每次都查询DOM，尝试执行以下操作

var images = document.getElementsByClassName("Image")

---

也许您可以使用before和after来影响除当前悬停的图像之外的所有图像。

function imageChanger(evt){
    evt.target.classList.add("own_hover");
    document.getElementsByClassName("Image").forEach(function(e){
        if(e != evt.target) e.ClassList.add("other_hover")});
}

function imageEqualizar(evt){
    document.getElementsByClassName("Image").forEach(function(e){
        e.ClassList.remove("other_hover");
        e.ClassList.remove("own_hover");
        });
}

var images = document.getElementsByClassName("Image")