CODEWITHSUNDEEP
jquerycssinternet-explorer-8
sephiith
sephiith

Reputation: 1197

jQuery css toggle error in IE 8

Please note: Code works in all browsers except IE 8 and below.

JS Fiddle: http://jsfiddle.net/6tTcq/ (JS fiddle won't work in IE 8 where the problem is.)

Program: jQuery toggles the css class ._22t then the class ._22 is hovered over.(Tooltip) Works in all browsers except IE 8 and below.

Problem: Ever since I added the below code to ._22t:hover the tool tip no longer works in IE 8. 

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
background-color: black;
filter: alpha(opacity=10);

I can't work out why the filter property would break the css toggle?

HTML CODE:

<div class="inter">
    <div class="_0"></div>          
    <div class="_22"><div class="_22t"><p>This is a tooltip. This is the first step for the jquery path system</p><div class="tooltiptail"></div></div></div>       
</div>

jQuery CODE:

$(document).on('mouseenter mouseleave', '.inter [class]', function(event) {     
        $('._22t').toggle(event.type === 'mouseenter');
   });

CSS CODE:

._22{
    position: absolute;
    left: 271px;
    top: 280px;
    width: 150px;
    height: 150px;
    cursor: hand; 
    cursor: pointer;
    display: block;
    background-color: blue;
}

._22t{
    position: relative;
    top: 161px;
    left: 0px;
    margin: 0;
    width: 200px;
    height: 110px;
    padding: 5px;
    background: rgb(97, 99, 101);
    background: rgba(99, 100, 103,0.9);
    border: 4px solid rgb(69, 70, 71);
    border: 4px solid rgba(69, 70, 71, 0.9);
    display: none;
    color: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

._22:hover {
    background: rgba(0, 0, 0, 0.1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    background-color: black;
    filter: alpha(opacity=10);
}

.inter {
    position: relative;
    width: 716px;
    height: 604px;
    background-image: url('0.png');
}

When I change display to block on the ._22t class the tooltip appears perfectly. But when I hover over it then disappears. I'm assuming there is an issue with the toggle.

Upvotes: 0

Views: 657

Answers (3)

lax
lax

Reputation: 46

try this

$(document).on('mouseenter mouseleave', '.inter [class]', function(event) {
$('.' + this.className + 't').toggle(event.type =='mouseenter');
       })

Upvotes: 1

veysiertekin
veysiertekin

Reputation: 1871

Use jQuery's "hover" function, it will work for keyboard events either:

$("<selector>").hover(
  function () {
    $('._22t').show();
  },
  function () {
    $('._22t').hide();
  }
);

Upvotes: 0

Dorn
Dorn

Reputation: 185

You could use $.hover()

$.hover(function() { $('._22').show() }, function() { $('_22').hide() });

Upvotes: 0

Related Questions