CSS在悬停展示内容

我在这里踢我自己，因为我已经做了这么多次，但由于某种原因，我的代码不工作，我不能锻炼为什么。我一直在盯着它一段时间，所以可能没有帮助。无论如何，我试图做一个CSS悬停。所以当你将鼠标悬停在一个div上时，会显示另一个div。CSS在悬停展示内容

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

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

来源

2013-10-04 JDavies

更改选择器：在这种情况下，你想

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

jsFiddle example

.pressListItem:hover .pressItemHover查找与类pressItemHover的元素是pressListItem的后裔，而实际上它是一个兄弟，使用相邻的兄弟选择器+。

来源

2013-10-04 18:28:17 j08691

1+它的工作的一部分，但它确实出问题..它闪烁 - 在Chrome反正 –

完美谢谢！我甚至尝试过使用>，但+似乎已经做到了！谢谢！！ – JDavies

@JoshC好的，谢谢，我会做一些测试，可能需要使用CSS – JDavies

在您的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>

，或者如果你不wan't调整你的DOM你可以改变CSS

.pressListItem:hover + .pressItemHover {

来源

2013-10-04 18:29:05 matewka

CSS在悬停展示内容

回答

相关问题