1

我在这里踢自己，因为我以前做过很多次，但由于某种原因，我的代码不起作用，我无法锻炼为什么。我已经盯着它看了一段时间，所以这可能没有帮助。无论如何，我正在尝试在悬停时做一个 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;      
}

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

4

2 回答 2

4

将选择器更改为：

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

jsFiddle 示例

.pressListItem:hover .pressItemHover寻找一个元素的类是当它实际上是一个兄弟pressItemHover的后代的pressListItem时候，在这种情况下你想使用相邻的兄弟选择器+。

于 2013-10-04T18:28:17.137 回答
0

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

<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 {
于 2013-10-04T18:29:05.397 回答