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来实现此目的 -

这是小提琴 - DEMO

hover需要2个回调函数 - $（selector）.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();
});

希望这有帮助。

将鼠标悬停在不同的div上时更改div

4 个答案: