Question

I am trying to make a page that ‘unblurs’ (removes the text shadow) on hover.

This works in all browsers except for IE: http://mmhudson.com/brett.html

It doesn’t work because I am setting the color to ‘transparent’ when the element is not being hovered on and the IE filter ‘blur’ inherits that so the text shadow is also transparent.

How can I make the filter not inherit that or make it so that only the shadow is invisible?

I am currently using a plugin, but I could use regular css if that is preferable.

http://jsfiddle.net/PaDwt/

Note the html if IE block

I only need support for IE8 and IE9, but IE7 and earlier would be good too.

Answer 1

The problem is not that it is inheriting the transparent color, it’s that IE doesn’t support text-shadow at all.

Use this stackoverflow.com/questions/6905658/css3-text-shadow-in-ie9

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

———–EDIT————–

Is this what you’re looking for?
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"
      });
    }
  });
});​

This works for me in IE9.