将鼠标悬停在另一个div上时更改div

Question

我试图将一个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>

而我的CSS：

#Image1:hover .Images {
    transform: scale(0.5);
    visibility: hidden;
}

#Image1:hover #Image1 {
    transform: scale(1.5);
    visibility:visible;
}

请多多包涵，因为我还是HTML和CSS的新手。 到目前为止，我发现的所有内容似乎都要求div嵌套或使用Jquery。 是否有任何方法可以仅使用HTML和CSS来完成？

Answer 1

不可以。仅CSS是无法做到这一点的。

您可以使用JQuery进行类似其他答案的建议。 如果您不喜欢使用该库，则可以使用纯Javascript。

首先，创建2个类： .own_hover和.other_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)
}

然后，创建一个添加相应类的函数（以后将其删除）。

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

使用大约15行JS，您可以完成所需的工作。

我没有尝试过，但是这就是我要解决您的问题的方式。 可以尝试，失败，调试并重新开始，直到找到所需的解决方案。

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

var images = document.getElementsByClassName("Image")

Answer 2

如果您使用javascript很简单，则可以执行以下操作：

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

希望能帮助到你

Answer 3

您可以使用jquery hover来实现此目的-

这是小提琴- 演示

悬停需要2个回调函数-$（选择器）.hover（handlerIn，handlerOut）;

当您将鼠标光标移入时，将调用handlerIn，而将光标移出时，将调用handlerOut。

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

Answer 4

试试这个使用jQuery：

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

希望这可以帮助。