How to Change border on image when link is hovered

[think360studio]

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!

[twiss]

a:hover ~ img ?

[ko ko]

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.

[almostbob]

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

[almostbob]

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

[twiss]

"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.

[almostbob]

"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 :)

[twiss]

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