Strange background color appearing on text hover?

The "problem" is caused by the below snippet of code.

Up vote 0 down vote favorite share g+ share fb share tw.

I've no idea what's causing it. The "normal" state: The text "hover" state: See that little glow around the download text? Here's the code: .

PostRow . Post . PostThumb { background: #222; display: block; width: 267px; height: 153px; position: relative; } .

PostRow . Post . Cover { background: #222 url(../images/postCover.

Jpg) no-repeat; box-shadow: inset 0 0 235px rgba(0,0,0,0.9); display: none; width: 267px; height: 153px; position: absolute; top: 0; } . PostRow . Post .

Cover . LivePreview a { float: left; color: #e9eff4; text-shadow: 0 1px 0 #000; margin: 65px 0px 65px 51px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } . PostRow .

Post . Cover . LivePreview a:hover { text-shadow: 0 1px 0 #000, 0 1px 7px rgba(255,255,255,0.4); } .

PostRow . Post . Cover .

Download a { float: left; color: #ff6464; text-shadow: 0 1px 0 #000; margin: 65px 9px 65px 20px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } . PostRow . Post .

Cover . Download a:hover { text-shadow: 0 1px 0 #000, 0 1px 7px rgba(237,105,105,0.6); } html css link|improve this question edited Jan 25 at 5:24sdleihssirhc8,79411123 asked Jan 24 at 19:34tctc912065 91% accept rate.

The "problem" is caused by the below snippet of code: . PostRow . Post .

Cover . Download a:hover { text-shadow: 0 1px 0 #000, 0 1px 7px rgba(237,105,105,0.6); } I believe. Please correct me if I'm wrong.

Seeing as that is his only :hover statement, it has to be. – Thomas Schoof Jan 24 at 19:40 there are actually two :hover statements, hence my doubt (the second is right at the bottom of the paste) – Chris Browne Jan 24 at 19:42 The text shadow isn't causing it. It happens even if I just use a text-decoration.

– tctc91 Jan 24 at 20:01 I see, well in that case perhaps it's a browser/OS issue. Does it happen on all browsers/systems? – Chris Browne Jan 24 at 20:09 1 does commenting out this rule fix the problem?

– Salman A Jan 24 at 20:17.

(i.e. Internet Explorer? ) If it's happening in Internet Explorer, you may want to consider using the filter method: workingwith.me.

Uk/articles/css/cross-browser-drop-shadows More information about that can be found here, as well: Text Shadow in Internet Explorer?

The rule: . PostRow . Post .

Cover . LivePreview a:hover { text-shadow: 0 1px 0 #000, 0 1px 7px rgba(255,255,255,0.4); } adds a text shadow on the link hover; in fact, it adds two text shadows to the link. Not all browsers support text shadow but those that do (recent versions of Chrome and FireFox for example) will show the effect you mentioned in the screen shots.

0 1px 0 #000 creates a solid black shadow 1px below the text 0 1px 7px rgba(255,255,255,0.4) creates a 7px blurred shadow of 40% opaque white color. Because of blurring, the shadow does not appear as a shadow but rather as a glow.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.