I do not have much experience with design, but I am trying to create a somewhat disjointed effect in CSS. I have text that serves as a link with an image next to it. I want a border to appear around the adjacent image whenever the linked text is hovered over. I have been through many posts on multiple websites and it seems pretty complicated (I am a beginner). I definitely want to use CSS rather than JQuery/javascript. Please help!

Recommended Answers

a:hover ~ img ?

Jump to Post

"next to it" and "adjacent" suggest IMHO that the img is not a child of the anchor, also because TS went "through many posts on multiple websites and it seems pretty complicated". Anyway, let's see.

You might be right, but when somebody also says they arent sure, fuzzy logic & …

Jump to Post

All 7 Replies

a:hover ~ img ?

You can use ':hover' CSS pseudo class for making the affect when the user mouse-over on that selector(s). You can use both

img:hover {statement}

or

a:hover img {statement}

. For the second case, the HTML image tag must be child of the HTML anchor tag, and it will be apply the statement with the parent anchor element was mouse-over by the user.

commented: Erm, I think TS stated quite clearly that img is not a child of a? -1
commented: Actually the OP says nothing about the child state of the image, it would be functionally easier to assume the image is linkable, a child of the anchor +13

when declaring a pseudo state,
declare the default state or the state may not reset, on poorly compliant browsers
(~75% use the poorly compliant browser, it came preinstalled)
assuming the image is a child of the link, the simplest way to work it <a href='something'>link text <image src='something' alt='something else' width='lots' height='somewhat'></a>

a img {border:2px black;}
a:hover img {border-top:2px red;border-bottom:2px blue;}

gdonya zero

twiss: next to does not exclude the image being a child of the anchor

"next to it" and "adjacent" suggest IMHO that the img is not a child of the anchor, also because TS went "through many posts on multiple websites and it seems pretty complicated". Anyway, let's see.

"next to it" and "adjacent" suggest IMHO that the img is not a child of the anchor, also because TS went "through many posts on multiple websites and it seems pretty complicated". Anyway, let's see.

You might be right, but when somebody also says they arent sure, fuzzy logic & try to convince them to make their layout the easy way :)

Hahaha, well. Perhaps it's more logical if you can also click on the image anyway :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.