html – 不使用背景图像的纯CSS图像悬停

发布时间：2020-12-14 23:07:48 所属栏目：资源来源：网络整理

导读：我想在不使用背景图像的情况下在悬停/翻转时进行纯CSS图像更改.到目前为止,我有一个图像,当您翻转该图像时,会出现另一个图像.这是CSS： #hidden {display: none;}#visible:hover + #hidden {display: block;} 因此,当您翻转#visible div时,会出现#hidden div

我想在不使用背景图像的情况下在悬停/翻转时进行纯CSS图像更改.到目前为止,我有一个图像,当您翻转该图像时,会出现另一个图像.这是CSS：

#hidden {
display: none;
}

#visible:hover + #hidden {
display: block;
}

因此,当您翻转#visible div时,会出现#hidden div.这是jsFiddle：http://jsfiddle.net/MNyzd/1/

这很好用,但这并不是我想要完成的.我想要交换图像.所以当你翻转#visible时,它应该消失而不是保持可见.我的第一个想法是让#visible div显示：无悬停(#visible：hover display：none;),但这不起作用.

那么有没有人知道如何使用这种方法将其成功转换为传统的图像悬停/交换？任何帮助将不胜感激,再次,这里是jsFiddle … http://jsfiddle.net/MNyzd/1/

最佳答案

使用悬停在其上的容器：

http://jsfiddle.net/MNyzd/8/

.hidden {
    display: none;
}

.container:hover .visible
{
    display: none;
}

.container:hover .hidden {
    display: block;
}

另见这个答案：Hide / show content via CSS:hover (or JS if need be)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!