CSS悬停展示内容 [英] CSS on hover show content

问题描述

我在这里踢自己，因为我之前做过很多次，但由于某些原因，我的代码不工作，我不能锻炼为什么。我一直盯着它一会儿，所以可能不会帮助。无论如何我试图做一个CSS悬停。因此，当您将鼠标悬停在一个div上时，会显示另一个div。

I'm kicking myself here as I've done this plenty of times before, but for some reason my code is not working and I can't workout why. I've been staring at it for a while now so that probably doesn't help. Anyway I'm trying to do a CSS on hover. So when you hover over a div with it displays another div.

HTML

<div class="pressListItem">
   <img src="" width="" height="">
   <h3>July 2013</h3>
</div>
<div class="pressItemHover">
   <p>This is come more content, lalala here is a little snippet</p>
   <span></span>
   <span>Read more</span>
</div>

CSS

我使用不透明度转换，因为我想它淡入。

I'm using the opacity transition as I want it fade in.

.pressItemHover{
    opacity: 0;
    transition: opacity 0.5s linear 0s;
    visibility: hidden; 
}

.pressListItem:hover .pressItemHover{
    opacity: 1;
    visibility: visible;
}

.pressListItem{
    width: 200px;
    float: left;
    height: 200px;
    margin-right:12px;
    text-align: center;
    border: solid 1px #e4e4e4;      
}

如果任何人可以指出我做错了，

If anyone could point out what I'm doing wrong it would be much appreciated!

推荐答案

将选择器更改为：

.pressListItem:hover + .pressItemHover {
    opacity: 1;
    visibility: visible;
}

jsFiddle示例

jsFiddle example

.pressListItem：hover .pressItemHover 查找具有 pressListItem 的后代的 pressItemHover 类的元素sibling，在这种情况下，您要使用相邻的兄弟选择器 + 。

.pressListItem:hover .pressItemHover looks for an element with the class pressItemHover that is a descendant of pressListItem when in reality it's a sibling, in which case you want to use the adjacent sibling selector +.

这篇关于CSS悬停展示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！