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!
think360studio 0 Newbie Poster
twiss 155 Veteran Poster
a:hover ~ img ?
ko ko 97 Practically a Master Poster
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.
twiss commented: Erm, I think TS stated quite clearly that img is not a child of a? -1
almostbob 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
almostbob 866 Retired: passive income ROCKS
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 866 Retired: passive income ROCKS
twiss: next to does not exclude the image being a child of the anchor
twiss 155 Veteran Poster
"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 866 Retired: passive income ROCKS
"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 155 Veteran Poster
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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.