SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery rollover not working in IE

    Hi guys,

    I'm working on a page that incorporates a dribbble style rollover effect on a div/image. When the mouse enters the div area a hidden overlay div will fade in. This seems to work fine across every browser except for IE(8). I am completely at a loss as it seems to work fine in a seperate html file I created to test it. I have also ran the page with break points on the jquery that tells the overlay div to fade in and it is getting to this line.

    Can anyone tell me where I am going wrong please.

    The page can be accessed here: http://www2.hull.ac.uk/files/clearin...s/clearing.htm

    The code in question is located within the 'What our students say' area and is as follows:

    HTML
    Code:
     <div class="videoItem">
                                  <img src="images/rollover-image.png" alt="" />
                                  <div class="rollOver">
                                   <a class="fancyText" href="#inline1" title="Eleanor Hardie, 20, Leicestershire">
                                     <h3>Eleanor Hardie</h3>
                                     <p>Eleanor is studing BSc Environmental Sciences at the Scarborough Campus...[read more]</p>
                                  </a>
                               </div>
    CSS
    Code:
    div.videoItem {
        float:left;
        margin:20px 10px 0 0;
        width:210px;
        border:1px solid #eeeeee;
        height: 210px;
        position:relative;
    }
    
    div.videoItem img {
        position: absolute;
        top:0;
        left: 0;
    }
    
    div.videoItem a {
        display:block;
        text-decoration: none;
        height:100%;
    }
    
    div.videoItem h3 {
        font:italic normal 1.5em Georgia, "times new Roman", serif;
        line-height: 150%;
        color:orange;
    }
    
    div.videoItem h3, div.videoItem p {
        padding:0 10px;
    }
    
    div.videoItem div.rollOver {
        height:95%;
        width:100%;
        background:#1a1a1a;
        padding-top: 5%;
        color:#eeeeee;
    }
    jQuery
    Code:
    $(document).ready(function(){
                setUp();
             });
    
             function setUp() {
                $(".rollOver").hide();
    
                $(".videoItem img").mouseenter(function(e) {
                   $(".rollOver").fadeTo(300, .95);
                });
    
                $(".rollOver").mouseleave(function(e){
                   $(".rollOver").fadeOut();
                });
             }
    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pretty much as soon as I hit post I tried adding some positioning to the .rollOver class (absolute, top, left). This now works across browsers.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •