Question

我有两个图像，它们都需要在HTML中（因此没有背景图像），并且在悬停一个图像时，它会交换为另一个。

我以为我的代码有效，但似乎有点毛病。我无法解决这个问题。

这是我的CSS：

#wrapper img.on,
#wrapper.gridWrap img.on {
display:none;
}

#wrapper img.default:hover img.on,
#wrapper img.default:hover img.on {
display:inline;
}

#wrapperimg.default:hover,
#wrapper img.default:hover {
display:none;
}

通过在display:block;和display:inline;之间交换图片，可以做任何事情吗？

Answer 1

要使其正常工作，您需要将:hover伪类设置为父容器（.wrapper）而不是图像。

jsFiddle Demo

#wrapper
{
    display: inline-block;
}
#wrapper:hover img.default,
#wrapper img.on 
{
    display:none;
}

#wrapper:hover img.on,
#wrapper img.default 
{
    display:inline-block;
}

Answer 2

这是Pure CSS解决方案。

<强> WORKING DEMO

HTML：

<div class="images">&nbsp;</div>

CSS：

.images{background: url(http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-2-icon.png) no-repeat 0 0; height:300px; width:300px;}

.images:hover{background: url(https://si0.twimg.com/profile_images/2940708431/842924fb3e2cc1f7fddf1b195c3f6c81.jpeg) no-repeat 0 0; height:300px; width:300px; cursor:pointer;}

我希望这就是你要找的东西。

Answer 3

简单的CSS解决方案：

#wrapper img { position: absolute; float: left; }
#wrapper .on { display: none; }
#wrapper:hover .on { display: block; }

http://jsfiddle.net/5tCju/3/

反转版本：

#wrapper img { position: absolute; float: left; }
#wrapper:hover .on { display: none; }

http://jsfiddle.net/5tCju/4/

Answer 4

使用display属性强制浏览器重新创建页面流，从而闪烁。通常的解决方案是避免使用<img>标记并使用background-image，但是，如果您想使用当前标记，则只需将一个图像放在另一个图像上方即可：

#wrapper{
    position: relative;
}
#wrapper img{
    position: absolute;
}

...并隐藏/显示第二个：

#wrapper img.on{
    opacity: 0;
}
#wrapper img.on:hover{
   opacity: 1;
}

(Updated fiddle)

display可能会更好，但我还没有尝试过。

Answer 5

#wrapper img.on{
 display:none;
}
#wrapper:hover img.default{
 display:none;
}
#wrapper:hover img.on{
  display:block;
}

<强> UPDATED FIDDLE

你的错误是你没有正确使用:hover。 .on不是.default的孩子，这就是#wrapper img.default:hover img.on语句无效的原因.. .on和.default都是#wrapper的孩子这就是为什么你应该使用:hover作为你的包装来改变图像

纯CSS图像交换

5 个答案: