css - 纯 CSS 图像交换

Question

我有两张图片都需要在 HTML 中（所以没有背景图片），在悬停一张时，它会换成另一张。

我以为我的代码可以正常工作，但似乎有问题。我无法解决这个问题。

JSFiddle在这里：http: //jsfiddle.net/5tCju/

这是我的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 演示

#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

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

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

...以及隐藏/显示第二个：

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

（更新小提琴）

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

Answer 3

这是纯 CSS 解决方案。

工作演示

的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 4

简单的 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 5

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

更新的小提琴

你的错误是你没有:hover正确使用。.on不是.default那为什么声明#wrapper img.default:hover img.on不起作用.on的孩子..因为.default两者都是 那#wrapper为什么你应该使用:hover你的包装器来更改图像的孩子