Question

Ad Blocks Page Image

亲爱的，

我有这个页面，如果我鼠标悬停在任何橙色广告块上，则会出现蓝色虚线边框，然后点击每个广告块显示相应的信息。

我在JQuery中有代码块

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

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


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

        $(this).css(cssObj);

     }).mouseout(function(){

        $(this).css(cssObj2);

     });          

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

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

它在Chrome中工作正常，但在IE8中工作不正常......我可以知道这是什么问题。

Answer 1

从你的javascript中取出鼠标悬停并像正常一样使用CSS;）

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

这是更容易接受的方式

此外，我认为必须以width style color的顺序为边框，不确定如果您执行错误的参数顺序，它是否适用于所有浏览器。

如果你还没有确定你的JS被包装在$（document）.ready（）中，就像这样：

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

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

您可以使用当前的JS和当前的CSS更新您的问题吗？

Answer 2

以下在Chrome和IE8中对我有效。然而，当我在IE8中测试时，出现了“Active X”弹出窗口，询问我是否要运行JavaScript。如果不允许IE运行脚本内容，jQuery悬停将无法工作。可能是这样的情况，你的IE8的首选项设置为始终禁用脚本（或提示你，你只是错过了它）。请注意，CSS :hover仅适用于IE6中的<a>标记。

希望这会有所帮助：）

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

mouseover mouseout在IE8中不起作用

2 个答案: