ansaurus

Question

CSS:Hover's problem with text that is hidden because of overflow:hidden ?

Answer 1

+1 A:

Here is my solution. I used the jQuery library, but this can be done with plain old javascript as well.

The javascript to handle the mouseover and mouseout events.

<script type="text/javascript">
        $(document).ready(function() {
            $('.box').mouseover(function() {
                $(this).addClass('boxHover');
                $(this).children('.content').addClass('contentHover');
            });

            $('.box').mouseout(function() {                  
                $(this).removeClass('boxHover');
                $(this).children('.content').removeClass('contentHover');
            });
        });    
</script>

The styles for the different states of the divs.

<style type="text/css">
        .box
        {
            width: 200px;
            padding: 50px;
            height: 100px;
            z-index: 0; 
            background: #D4D4D4; 
            border: medium red dashed;             
            margin-bottom: 5px;
        }

        .content
        {           
            height: 100px;   
            overflow: hidden; 
        }

        .boxHover
        {
            z-index: 1;
            height: auto;
            width: 400px;                
        }

        .contentHover
        {
            height: auto;
            overflow: visible;
        }
</style>

The body of the HTML. I removed the content here to keep the answer concise, but you should add some text so it overflows to see the solution working.

 <body>  
  <div class="box">
    <div class="content">
        Insert content here...
    </div>
  </div>  
  <div class="box">
    <div class="content">
       Insert content here....
    </div>
  </div>  
</body>

pwee167 2010-05-17 07:07:56

ansaurus

tags:

views:

answers:

CSS:Hover's problem with text that is hidden because of overflow:hidden ?

related questions