纯CSS图像交换

我有两个图像都需要在HTML（所以没有背景图像），并在一个悬停，它交换另一个。纯CSS图像交换

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

这里是我的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;之间的图像来完成？

来源

2013-08-29 Francesca

任何理由不使用'MM_swapImage '？因为这会产生你想要的悬停。或者你可以通过使用图像精灵并改变背景定位来做同样的事情？ – Nitesh

需要纯粹的CSS。精灵可以工作！谢谢 – Francesca

@NathanLee 1）这是一个CSS问题2）也许她不想购买Dreamweaver。 –

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

我希望这是你在找什么。

来源

2013-08-29 11:53:19 Nitesh

不能像原始帖子中所述的背景图片 – Francesca

但您想要一个纯粹的CSS解决方案，因此背景图片网址使它纯粹且不影响HTML。 - @Francesca – Nitesh

为了达到此目的，您需要将: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; 
}

来源

2013-08-29 11:54:04 Itay

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

来源

2013-08-29 11:59:36 jverban

使用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可能会更好地工作，但我还没有尝试过。

来源

2013-08-29 12:03:50

#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没有working..as .on和.default无一不是#wrapper这就是孩子为什么要为了使用:hover您的包装来改变图像

来源

2013-08-29 12:12:13

纯CSS图像交换

回答

相关问题