Question

我尝试执行以下代码，以便在链接悬停时显示透明度框。

  <script type="text/javascript">
  $(document).ready(function(){

$(".menu a").hover(function() {
    $(this).next("em").animate({filter:"alpha(opacity=40)", top: "75"}, "slow");
}, function() {
    $(this).next("em").animate({opacity: "hide", top: "85"}, "fast");
});
  });
 </script>
   <style>
     .menu li em {
background: #000;
width: 180px;
height: 45px;
position: absolute;
top: 85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
color:fff;
display:none;
       }
     </style>
       <body>
      <ul class="menu">
<li>
    <a href="http://www.example.com">This is an example</a>     
    <em>Welcome to this example tutorial</em>
     </li>
      </ul>
       </body>

当我悬停链接时，透明度不起作用，我需要将正确的透明度代码放在那里我的意思是在javascript函数中。非常感谢

Answer 1

Jquery是一个跨浏览器库和过滤器：“alpha（opacity = 40）”是特定于浏览器的。你只需使用不透明度。

$(".menu a").hover(function() {
  $(this).next("em").animate({opacity:"0.4", top: "75"}, "slow");
},function() {
  $(this).next("em").animate({opacity: "0", top: "85"}, "fast");
});
});

Answer 2

尝试使用“不透明度：0.4”和“不透明度：0”。 jQuery将这些值规范化为IE中的“过滤”值。

$(".menu a").hover(function() {
    $(this).next("em").animate({opacity: 0.4, top: "75"}, "slow");
}, function() {
    $(this).next("em").animate({opacity: 0, top: "85"}, "fast");
});

悬停项目时IE 8中的不透明度

2 个答案: