Question

您好
我正在为我的网站制作一个邮箱，我希望它用CSS3显示/隐藏我知道有很少的教程等如何做，但我尝试做的有点不同。我得到了一个好结果，但有一个问题。当我将鼠标悬停在项目上时，项目:hover高度不会与文本一起更改：

styles.css：

.mailbox_item {
    width: 440px;
    height: 20px;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}

.mailbox_item:hover {
    min-height: 100px;
    overflow: visible;
    display: block;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}

.mailbox_item_top {
    min-height: 20px;
    line-height: 13px;
}

.mailbox_item_body {
    min-height: 20px;
}

item.php

<div class="mailbox_item">  
    <div class="mailbox_item_top">  
        <h2 class="titleannouncement">Test Announcement</h2>  
        <span class="mail_author">0</span>  
    </div>  
    <div class="mailbox_item_body">  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus lacinia dui at mattis. Donec vitae tellus congue leo egestas tincidunt a eget lorem. Fusce et varius velit. In sollicitudin porta arcu, vel convallis mauris varius ut. Aenean id risus a ante mattis bibendum. Sed mollis ipsum ac metus fringilla eget imperdiet urna laoreet. Quisque tincidunt, purus eu vulputate pulvinar, metus arcu malesuada ante, vitae vehicula ipsum lectus ac libero. Cras in ligula at urna tincidunt tempor. Nam sodales lectus a sem sodales congue. Suspendisse ut ultricies nunc. Aenean blandit tempor ipsum lacinia tincidunt. Mauris ut ipsum non dolor luctus volutpat. Cras quis enim at lacus placerat dictum ut et elit. Vestibulum porta varius dui, rutrum gravida orci semper sit amet. Nam ornare iaculis velit, sit amet euismod felis pulvinar et. Nam sed ipsum eget elit adipiscing tristique.</p>
    </div>  
    <div class="newsdate">  
        <span class="newsdatetext">2011-04-30 06:54:05</span>  
    </div>
</div>

这就是我得到的：

Normal state - 这是预期的

on：hover - mailbox_item中的min-height值：hover保持不变，当文字变大时不会变高

on Hover

我知道我可以使用overflow:hidden;，因此文本不会与其他窗口重叠，但我想表明还有更多文字。如果有更多文本，如何强制更改min-height值？

提前致谢

Answer 1

您可以在height:auto规则上设置:hover属性，以便浏览器正确计算菜单项悬停时的高度，从而覆盖固定的height:20px在.mailbox_item规则中。请参阅this demo。

或者，如果您想使用CSS text-overflow，您可以使用双悬停，当您将鼠标悬停在菜单项上时会显示一些消息，然后当您将鼠标悬停时显示完整消息消息 - 请参阅this demo。

您应该考虑拥有大量悬停事件的用户体验。当将鼠标悬停在消息项上时，显示和隐藏消息正文的消息列表中的收件箱可能会分散注意力。

我希望这会有所帮助。

Answer 2

唯一的方法是使用javascript（jquery会让它变得更容易）。

您也可以尝试

overflow: auto;

如果你想要一个纯css解决方案，当它溢出时会添加一个滚动条。

用CSS显示/隐藏

2 个答案: