internet explorer text-shadow + hover

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.

The problem is not that it is inheriting the transparent color, it's that IE doesn't support text-shadow at all. Use this http://stackoverflow.com/questions/6905658/css3-text-shadow-in-ie9 — Isaac Fife, Jul 05 '12 at 20:41
useless comment ^ if you had looked at my jsfiddle or page source you would have seen I had already figured that much out and that I am clearly not asking how to use text shadow in IE — Max Hudson, Jul 05 '12 at 20:43
updated my answer. Take a look and let me know if that's the end result your are looking for? — Isaac Fife, Jul 05 '12 at 21:43

score 0 · Answer 1 · answered Jul 05 '12 at 20:35

0

Look this: CSS Blurred text shadow in IE part I

answered Jul 05 '12 at 20:35

Filipe Manuel

967
2
14
33

already done.. that's not my issue. I can blur the text fine, the issue is that the blur filter inherits the color property i set rather than using the color parameter I specified. – Max Hudson Jul 05 '12 at 20:40

Isaac Fife · Accepted Answer · 2012-07-05T21:38:20.313

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.

If you could delete this please. People will think it is a possible solution and it is not. Also if that downvote was you, please remove it unless you have a good reason to keep it — Max Hudson, Jul 05 '12 at 20:52

internet explorer text-shadow + hover

2 Answers2