mouseover mouse out nt working in IE8_问答_开发者

开发者 https://www.devze.com 2023-02-15 18:55 出处：网络

Dear All, I have this page in which if i mouseover on any orange ad block, then blue dashed border comes and on click of each ad block the respective info is displayed.

相关专题：css jquery

mouseover mouse out nt working in IE8

Dear All,

I have this page in which if i mouseover on any orange ad block, then blue dashed border comes and on click of each ad block the respective info is displayed.

I have the code block in JQuery as

var cssObj = {
  'border' : 'Dashed 2px #3B5998'
}

var cssObj2 = {
  'border' : 'none'
}


     $(".gil_Ads_AdOverState1").mouseover(function(){

        $(this).css(cssObj);

     }).mouseout(function(){

    开发者_如何学JAVA    $(this).css(cssObj2);

     });          

     $(".gil_Ads_AdOverState1").click(function(){ 

           $('#gDescZone1').hide();
           $('#gDescZone2').hide();
           $('#descAd2').hide();
           $('#descAd3').hide();
           $('#descAd4').hide();
           $('#descAd1').fadeIn();
     });

It is working fine in Chrome while same is not working in IE8... May i know what is the problem.

Following works OK for me in Chrome and IE8. However when I tested it in IE8 the "Active X" popup appeared asking if I wanted to run the JavaScript. The jQuery hover will not work without allowing IE to run scripted content. It might be the case that your IE8 has the preference set to always disable scripting (or is prompting you and you just missed it). Note that the CSS :hover will only work on <a> tags in IE6.

Hope this helps :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
    .bar:hover {
        border:2px dashed blue;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 $('.foo').mouseover(function(){
    $(this).css('border','2px dashed red');
 }).mouseout(function(){
    $(this).css('border','none');
 });   
});
</script>
</head>
<body>
<ul>
    <li class="foo">List item hover with jQuery css()</li>
    <li class="bar">List item hover with CSS</li>
</ul>
<a href="#" class="bar">Anchor</a>
</body>
</html>

Take the mouseovers out of your javascript and use CSS like normal ;)

.gil_Ads_AdOverState1{
  border: none;
}
.gil_Ads_AdOverState1:hover{
  border: 2px dashed #3B5998;
}

That's the more accepted way to do it

Also I think it has to be width style color in that order for border, not sure if it'll work in all browsers if you do the wrong order of parameters.

If you haven't already make sure your JS is wrapped in $(document).ready() like so:

$(function(){
  $(".gil_Ads_AdOverState1").click(function(){ 

         $('#gDescZone1').hide();
         $('#gDescZone2').hide();
         $('#descAd2').hide();
         $('#descAd3').hide();
         $('#descAd4').hide();
         $('#descAd1').fadeIn();
   });
});

Could you update your question with your current JS and current CSS?