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

Question

我一直在尝试将链接与图像连接，以便在链接悬停时，img标记切换到可见性：可见性：隐藏可见。我给了他们两个ID，我把它们放在不同的div中。问题在于，无论我如何尝试，我似乎都无法使用a标签影响img标签，因为它们位于不同的div中。我尝试过使用＆gt;和+属性，但这不起作用，因为它们没有关联。

是否可以这样做？

示例：

<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。

更改您的选择器

FIDDLE

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

#something2 img {
    visibility:hidden;
}

Answer 2

您可以使用jquery

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

Answer 3

您可以使用jQuery：

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

确保您的CSS中#somethingImage设置为visibility: hidden;。