【问题标题】:internet explorer text-shadow + hoverInternet Explorer 文本阴影 + 悬停
【发布时间】:2012-07-06 07:34:52
【问题描述】:

我正在尝试制作一个在悬停时“取消模糊”(删除文本阴影)的页面。

这适用于除 IE 之外的所有浏览器:http://mmhudson.com/brett.html

它不起作用,因为当元素没有悬停在上面时,我将颜色设置为“透明”,并且 IE 过滤器“模糊”继承了它,因此文本阴影也是透明的。

我怎样才能使过滤器不继承它或使它只有阴影不可见?

我目前正在使用一个插件,但如果需要,我可以使用常规 css。

http://jsfiddle.net/PaDwt/

如果 IE 阻塞,请注意 html

我只需要支持 IE8 和 IE9,但 IE7 及更早版本也可以。

【问题讨论】:

  • 问题不是继承了透明色,而是IE根本不支持text-shadow。使用这个stackoverflow.com/questions/6905658/css3-text-shadow-in-ie9
  • 无用的评论 ^ 如果您查看了我的 jsfiddle 或页面源代码,您会看到我已经想通了这么多,而且我显然不是在问如何在 IE 中使用文本阴影
  • 更新了我的答案。看看,让我知道这是否是您正在寻找的最终结果?

标签: jquery internet-explorer css


【解决方案1】:

问题不是继承了透明色,而是IE根本不支持text-shadow。

使用这个 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 中适用于我。

【讨论】:

  • 如果你能删除这个请。人们会认为这是一个可能的解决方案,但事实并非如此。此外,如果反对票是您,请删除它,除非您有充分的理由保留它
【解决方案2】:

【讨论】:

  • 已经完成了.. 这不是我的问题。我可以很好地模糊文本,问题是模糊滤镜继承了我设置的颜色属性,而不是使用我指定的颜色参数。
猜你喜欢
  • 2016-03-17
  • 1970-01-01
  • 2015-11-15
  • 2012-10-25
  • 1970-01-01
  • 2012-04-21
  • 2012-09-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多