纯 CSS 图像交换答案

【问题标题】：Pure CSS image swap纯 CSS 图像交换
【发布时间】：2013-09-01 19:59:21
【问题描述】：

我有两张图片都需要在 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; 之间交换图像来完成此操作吗？

【问题讨论】：

有什么理由不使用MM_swapImage？因为这将在悬停时生成您想要的内容。或者您可以通过使用图像精灵并更改背景定位来做同样的事情？
需要纯CSS。一个精灵可以工作！谢谢
@NathanLee 1) 这是一个 CSS 问题 2) 也许她不想购买 Dreamweaver。
是否可以在悬停时使用content: css 规则？我以前没用过，所以我们不太熟悉:)
这是您要找的吗？ jsfiddle.net/5tCju/1

标签： css image hover

【解决方案1】：

这是纯 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;}

我希望这就是你要找的。p>

【讨论】：

不能是原帖所说的背景图片
但是你想要一个纯 CSS 解决方案，所以背景图片 URL 使它变得纯洁而不影响 HTML。 - @弗朗西斯卡

【解决方案2】：

要使其工作，您需要将 :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;
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案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 可能会更好，但我还没有尝试过。

【讨论】：

【解决方案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 作为你的包装器为了改变图像

【讨论】：