Question

Hello
I’m making a mailbox for my website and I want it to show/hide with CSS3 I know there are few tutorial etc on how to do it, but I tried to do it a bit differently. I’m getting a good result, however there is one issue. When I hover on an item the item:hover height are not changing together with the text:

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>

and here is what I’m getting:

Normal state – this is as intended

on :hover – the min-height value in mailbox_item:hover stays the same and doesn’t get higher when the text gets bigger

on Hover

I know that I can use overflow:hidden; so the text wont overlap the other window but I wanted to show that there is more text. How can I force the min-height value to change if there is more text?

thanks in advance

Answer 1

You could set height:auto property on the :hover rule so that the browser correctly calculates the height when the menu item is hovered, overriding the fixed height:20px in the .mailbox_item rule. See this demo.

Or if you want to use CSS text-overflow you could have a double hover whereby you show some of the message when hovering on the menu item and then the full message when you hover over the message – see this demo.

You should consider the user experience of having lots of hover events. It is probably distracting to have an inbox like list of messages in which the message body shown and hidden when hovering over the message item.

I hope this helps.