opacity in IE 8 when hover items_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-11 20:10 出处：网络

I try to do the following code to show the tranparency box when the link is hovered. <script type=\"text/javascript\">

相关专题：jquery

I try to do the following code to show the tranparency box when the link is hovered.

  <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开发者_如何学C.example.com">This is an example</a>     
    <em>Welcome to this example tutorial</em>
     </li>
      </ul>
       </body>

when I hover the link, the transparentcy is not working, what the right transparency code I need to put there i mean inside the javascript function. thanks a lot

Jquery is a cross browser library and filter:"alpha(opacity=40)" is browser specific. You just use opacity.

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

Just try using "opacity: 0.4" and "opacity: 0". jQuery normalizes these values to "filter" values in 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");
});