如何连接来自两个独立div的元素

Question

我一直在尝试将链接与图像连接起来，以便当链接悬停时，img标签从visibility:hidden切换到visibility:visible。我给了他们两个id，把他们放在不同的div里。问题在于，无论我如何尝试，我似乎都无法用a标签影响img标签，因为它们位于不同的div中。我已经尝试过使用>和+属性，但这不起作用，因为它们不相关。

这是可能的吗?

的例子:

<div id = "something1"> <a href = "something.html" id = "somethingLink"> Word </a> </div>
<div id = "something2"> <img src = "something.jpg" id = "somethingImage"/> </div>

Answer 1

你不需要使用JS。

更改选择器的

小提琴

#something1:hover  ~ #something2 img {
    visibility: visible;
}
#something2 img {
    visibility:hidden;
}

Answer 2

你可以使用jQuery:

$('#somethingLink').hover(function(){
    $('#somethingImage').css("visibility", "visible");
});

确保#somethingImage在你的CSS中被设置为visibility: hidden;

Answer 3

可以使用jquery

$("#somethingLink").hover(
function(){$("#somethingImage").css("visibility","visible");},
function(){$("#somethingImage").css("visibility","hidden");}
)