IE浏览器文本阴影+悬停

Question

我正在尝试制作一个在悬停时"取消模糊"（删除文本阴影）的页面。

这适用于所有浏览器，除了IE：http://mmhudson.com/brett.html

它不起作用，因为当元素未悬停时，我将颜色设置为"透明"，并且 IE 过滤器"模糊"继承了该颜色，因此文本阴影也是透明的。

如何使滤镜不继承它或使其仅阴影不可见？

我目前正在使用插件，但如果更可取，我可以使用常规 css。

http://jsfiddle.net/PaDwt/

注意 html 如果 IE 块

我只需要对IE8和IE9的支持，但IE7及更早版本也会很好。

Answer 1

问题不在于它继承了透明颜色，而在于IE根本不支持文本阴影。

使用此 stackoverflow.com/questions/6905658/css3-text-shadow-in-ie9

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

-----------编辑--------------

这是你要找的吗？http://jsfiddle.net/PaDwt/4/

-.CSS

#paragraphs p{
  /*the width needs to be a set value, not a percentage*/
  width: 600px;
  /*blur all paragraphs*/
  color: transparent;
  text-shadow: 0px 0px 2px #666666;
  filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=3);
}

-.JS

$(document).ready(function(){
  if($.browser.msie) $("#paragraphs p").css("color", "black");
  $("#paragraphs p").mouseover(function(){
    var thisP = this;
    if($.browser.msie)
    {
      $("#paragraphs p").css({
        filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=3)"
      });
    }
    else{
      $("#paragraphs p").css({
        color:"transparent",
        textShadow:"0 0 2px #666",
      });
    }
    $(thisP).css({
      color:"#000",
      textShadow:"none",
      filter:"none"
    })
  });
  $("#paragraphs p").mouseout(function(){
    if($.browser.msie)
    {
      $("#paragraphs p").css({ 
        filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=3)"
      });
    }
    else
    {
      $("#paragraphs p").css({
        color:"transparent",
        textShadow:"0 0 2px #666"
      });
    }
  });
});​

这在IE9中对我有用。

Answer 2

看看这个： CSS IE中的模糊文本阴影第一部分