Captain Treibholz Captain Treibholz - 3 months ago 7
CSS Question

Change picture by hovering over text

I want to change the displayed image, when the curosor is hovering over the

a
tag with plain css

My guess was to write something like this, but it didnt work:

.folder a:hover > .folder img{
content: url(new picture);
}


here is my code

html:

<div>
<div class="folder">
<img></img>
<a href="folder1">folder1</a>
</div>
...
</div>


css:

.folder img{
content:url(pictures/folderdarkblue.png);
}

Answer

It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the after your image, you could try doing this:

https://jsfiddle.net/ksec65wm/

<div class="folder">
    <a href="folder1">folder1</a>
    <img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
    <img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>

CSS:

img.one {
  display:none;
}
a:hover ~ img.one {
  display: inline-block;
}

a:hover ~ img.two {
  display:none;
}