CODEWITHSUNDEEP
htmlcsshover
user3411482
user3411482

Reputation: 1

How to connect elements from two separate divs?

I've been trying to connect a link with an image so that when the link is hovered, img tag switches to visibility:visible from visibility:hidden. I gave them both IDs and I've placed them in separate divs. The problem lies that I can't seem to manage to affect img tag with the a tag no matter how I try just because they are in separate divs. I have tried by using > and + properties but that does not work because they are not related.

Is it possible to do this?

Example:

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

Upvotes: 0

Views: 92

Answers (3)

Yaro
Yaro

Reputation: 568

You can use jquery

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

Upvotes: 0

feitla
feitla

Reputation: 1334

You don't have to use JS.

Change your selector's

FIDDLE

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

#something2 img {
    visibility:hidden;
}

Upvotes: 1

Adam Fratino
Adam Fratino

Reputation: 1241

You can use jQuery for this:

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

Just make sure #somethingImage is set to visibility: hidden; in your CSS.

Upvotes: 0

Related Questions