Question

我在这里踢我自己，因为我之前已经做了很多次，但由于某种原因，我的代码不起作用，我无法锻炼为什么。我已经盯着它看了一段时间，所以这可能没有帮助。无论如何我在悬停时尝试做CSS。因此，当您将鼠标悬停在div上时，它会显示另一个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

我正在使用不透明度过渡，因为我想让它淡入。

.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;      
}

如果有人能够指出我做错了什么，我将不胜感激！

Answer 1

将选择器更改为：

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

<强> jsFiddle example

.pressListItem:hover .pressItemHover查找一个类pressItemHover的元素，它是pressListItem的后代，而实际上它是一个兄弟，在这种情况下，您想要使用相邻的兄弟选择器{{ 1}}。

Answer 2

在您的HTML中.pressListItem和.pressItemHover是兄弟姐妹。在CSS中，您将div的样式定义为.pressListItem的子。您需要将HTML更改为此

<div class="pressListItem">
    <img src="" width="" height="">
    <h3>July 2013</h3>

    <div class="pressItemHover">
        <p>This is come more content, lalala here is a little snippet</p>
        <span></span>
        <span>Read more</span>
    </div>
</div>

或者如果你不想重构你的DOM，你可以改变这部分CSS

.pressListItem:hover + .pressItemHover {

CSS悬停显示内容

2 个答案: