html - show/hide with CSS -

-

hello
i'm making mailbox website , want show/hide css3 know there few tutorial etc on how it, tried bit differently. i'm getting result, there 1 issue. when hover on item item:hover height not changing 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: 0s ease-in-out;     -moz-transition: 0s ease-in-out;     -o-transition: 0s ease-in-out;     -ms-transition: 0s ease-in-out;     transition: 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 @ mattis. donec vitae tellus congue leo egestas tincidunt eget lorem. fusce et varius velit. in sollicitudin porta arcu, vel convallis mauris varius ut. aenean id risus 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 @ urna tincidunt tempor. nam sodales lectus sem sodales congue. suspendisse ut ultricies nunc. aenean blandit tempor ipsum lacinia tincidunt. mauris ut ipsum non dolor luctus volutpat. cras quis enim @ 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 i'm getting:

normal state - intended

on :hover - min-height value in mailbox_item:hover stays same , doesn't higher when text gets bigger

on hover

i know can use overflow:hidden; text wont overlap other window wanted show there more text. how can force min-height value change if there more text?

thanks in advance

you set height:auto property on :hover rule browser correctly calculates height when menu item hovered, overriding fixed height:20px in .mailbox_item rule. see this demo.

or if want use css text-overflow have double hover whereby show of message when hovering on menu item , full message when hover on message - see this demo.

you should consider user experience of having lots of hover events. distracting have inbox list of messages in message body shown , hidden when hovering on message item.

i hope helps.


Comments

Post a Comment

Popular posts from this blog

objective c - Change font of selected text in UITextView -

-
can suggest me how change font of selected text in uitextview.i cannot use uiwebview since have edit text. have seen pages app.how possible in app. see formatting text within uilabel differently . since need editing, should @ javascript-based editors such ckeditor or tinymce . highly recommend wwdc 2011 video session 511: "rich text editing in safari on ios."
Read more

php - Accessing POST data in Facebook cavas app -

-
so i've got simple form in canvas / iframe facebook app, , i'm trying pass along values post. reading on s.o. , fb's latest docs, understand it, data send via post form can accessed on receiving end $_request object. i read on thread on s.o. in order post forms work need pass along input named "signed_request" value current signed_request (i have signed request working ok otherwise...all login , authentication stuff working fine). isnt mentioned anywhere in official fb docs. so problem comes in $_request object signed request, , bunch of other session stuff. form inputs found. the way can read them set method of form "request" isn't real form method. takes of inputs , sends them args in url. horrible. here's sample page canvas app form i'm using try debug (leaving out authentication stuff): <form enctype="application/x-www-form-urlencoded" method="post" target="_top" id="my_form" action=...
Read more

c# - Getting control value when switching a view as part of a multiview -

-
i have following code in aspx page: <asp:button id="display_button" runat="server" text="display" onclick="button1_click" /> &nbsp; <asp:button id="edit_button" runat="server" text="edit" onclick="button2_click" /> &nbsp; <asp:button id="save_button" runat="server" text="save" onclick="button3_click" visible="false" /> &nbsp; <asp:multiview id="multiview1" runat="server" activeviewindex="0"> <asp:view id="view1" runat="server"> <asp:formview id="view_program" runat="server"> <itemtemplate> <%# eval("status").tostring().trim() %> </itemtemplate> </asp:formview> </asp:view> <asp:view id="view2" runat="server"> ...
Read more