Question

Using jQuery 1.5.1
Tried this block of code in: head section as well as in line, in doc ready function as well as out. NOTHING makes it work, I’m stumped. It works in all other browsers.

What is supposed to happen is that when user hovers over a div with class “lsr” another div with display:none appears.

<script type="text/javascript"> 
    $(document).ready(function() {
        $("div.lsr").hover(
            function() { $("#lsr").show(); },
            function() { $("#lsr").hide(); }
        );
    });
</script>
...
<div class="lsr"></div>

<div id="lsr""> Some Text appears </div>

ok…. so the ANSWER is that IE does NOT like the empty div. It apparently will not render it. The best solution I found was to use the following CSS on the empty div….. I tried adding padding and   none of that worked. What DOES work is to use the following CSS on the empty div.

.lsr {
  ...
  background-color: #fff;
  filter:alpha(opacity=0);
  opacity:0.0;
}

Answer 1

• Your div.lsr has no content, which would make it mighty hard to hover over (depending on your CSS)
• You have an extra " on <div id="lsr"">

If I fix these issues it works fine for me: JSFiddle

EDIT based on comments IE has problems recognizing events on a div that has no content and that has position: absolute. To fix, try either using different CSS positioning, or adding content to the div (e.g.  )