Question

我想更改显示的图片，当curosor悬停在a标签上时，使用普通css

我的猜测是写这样的东西，但它不起作用：

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

这是我的代码

HTML：

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

的CSS：

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

Answer 1

为什么不尝试将不透明度设置为0，然后添加下一张图片，而不是尝试更改每个div的悬停图片？

一些提示

.box-container:hover .image-container,
.box-container:hover #picture {
    opacity: 0;
}

下面是一个例子，我发现它也很不错

https://jsfiddle.net/m4v1onyL/

基本css如下

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

正如您所看到的，我们只是在<a>标记中切换两个这样的图像。

Answer 2

使用普通的css和你当前的html代码很难做到这一点，因为css并不真正允许向后导航。如果您不介意在图片后使用<a>，可以尝试这样做：

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;
}

通过将鼠标悬停在文本上来更改图片

2 个答案: