mouseover透明div类来显示图像

I am stuck very long on this.. hoping someone can help me with this as I am not proficient in Javascript.

The scenario is this:

I am using wordpress, and in a single page, I have a big picture(800px X 1200px) with cupcakes in it.

The effect I am hoping to achieve is this; When the user mouseover a particular cupcake(with a layer of transparent div), there will be an image that will appear(320px x 320px).

I tried using css :hover, it works for safari, chrome and firefox. But for IE, it does not work. Thus I am thinking of using javascript to manipulate the div class instead onmouseover and onmouseout events

PHP/HTML:

<div id="f1"></div>

CSS:

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
}

So when the user mouseover the transparent div, I want an image(320px x 320px) to appear.

Many thanks!

:hover is supported in IE7+, but there might be other issues that are buggy or not supported such as opacity or hasLayout issues.

You can do this is javascript:

var div = document.getElementById('f1');
div.onmouseover = function() {
    div.className += ' hover';
};
div.onmouseout = function() {
    div.className = div.className.replace(/\shover/,'');
}

Or jQuery:

$('#f1').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

It will add a hover class to the element when moused over so you can style it, f.ex:

#f1.hover{ background:url(path/to/img.jpg); };

For you can use IE filter for this. Write like this:

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
filter: alpha(opacity=0);
}

If you want image appear in second div outter #f1 div try this

DEMO 1

or you want to appear image as background image of f1 div try this one

DEMO 2

Try This: Attach a thumbnail with every link and make it display : none and then through jQuery .hover() make it show and hide.

<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
    .lsr { 
        width: 10px; 
        height: 10px;
        background-color: #000; 
    }

    #lsr {
        display: none;
    } 
}

  </style>

</head>
<body>
 <div class="lsr" id="img1"><a href="#"><img src="http://pbskids.org/itsmylife/images/teststress1.gif" alt="img" ></a></div>

<div id="lsr"> 
    <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" id="img1" >
</div>
<script>
   $("div.lsr a").hover(
        function() { $("#lsr").show(); },
        function() { $("#lsr").hide(); }
    );
</script>

</body>
</html>