CODEWITHSUNDEEP
jqueryinternet-explorermouseover
Braian Mellor
Braian Mellor

Reputation: 1954

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??????

Upvotes: 0

Views: 7052

Answers (2)

Braian Mellor
Braian Mellor

Reputation: 1954

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

Upvotes: 1

Chase
Chase

Reputation: 29549

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()

Upvotes: 1

Related Questions