Hover one element and affect another – Wingdings Translator Online

So, for starters, what you want to do is done through Javascript. There is no way that hovering over an

element will change the image displayed in another element. In any case you could change the style of the element that receives the hover. The image is another element foreign to the list item, so you can’t alter the styles via the :hover selector.

What you could do, just with CSS, is rely on it to insert content, like an image, when hovering over a list item.

I leave you an example:

< title>Testing hover and :after

Testing 1

Testing 2

But even though you can do things like this, using only CSS is a bit rigid and won’t let you get where you want. So, you have no choice but to use a little Javascript.

Anyway, the behavior you need in Javascript is three lines of code if it arrives.

Here is an example of how you could do it:

< title>Testing Change image with Javascript

Section 1: Episodes

< ol id="pelisList">

Episode I: The Phantom Menace.

Episode II: Attack of the Clones.

You would only have to put the “mouseleave” event to remove the image (restoring your transparent image), when the mouse leaves the list element.

Section 1: Episodes

Related posts:

Related Posts