Jquery Mouseover doesn't work IE

问题

I need to show and image over another image when mouseover, this is a kind of menu. This works in chrome and firefox. Any Idea? Here comes the come

<div id="button1OverStyle" class="buttonOverStyle" onclick="changeFrame('main/main.html')" >
<img id="button1OverStyleImage" src="images/button_home.png" height="24" width="46" />

<script>      
  $('#button1OverStyle').hover(function(e) {
    showTittle('button1OverStyleImage');  });
  $('#button1OverStyle').mouseleave(function(e) {
    hideTittle('button1OverStyleImage');});
  $('#button2OverStyle').mouseover(function(e) {
    showTittle('button2OverStyleImage'); });
  $('#button2OverStyle').mouseleave(function(e) {
    hideTittle('button2OverStyleImage'); });      
</script>

I found where to find it. And This is the problem

in this line

<div id="button1OverStyle" class="buttonOverStyle" onclick="changeFrame('main/main.html')" >
            <img id="button1OverStyleImage" src="images/button_home.png" height="24" width="46" />
        </div>

Here Are the CSS

.buttonOverStyle{   position:absolute;  cursor:pointer;     z-index:1000;   height:24px;}  .buttonOverStyle img {   display:none;}

The problem is that if the image is not display the internet explorer does not recognize the div, so it can't make the "mouseenter" or "mouseover".

ANY IDEA??????

回答1:

Try mouseenter:

The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

HTML

<div>test</div>

jQuery

$("div").mouseenter(function(){
    $(this).css("color", "red");
});
$("div").mouseleave(function(){
    $(this).css("color", "blue");
});

EXAMPLE

You could also try .hover()

回答2:

Solution!

I make it all in Css but with opacity

.buttonOverStyle img {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
opacity: .1;}


.buttonOverStyle img:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: .9;}

this works for me

来源：https://stackoverflow.com/questions/12787373/jquery-mouseover-doesnt-work-ie

标签

jquery

internet-explorer

mouseover