EDIT: Hmm.. it doesn`t seem to be working on the CSS I`m trying to use it for... maybe I left out something in the coding. There aren`t supposed to be any spaces in the coding, right?
Resurrecting this thread because I'm doing a bit of work on a bio.
I'm trying to use this text effect on hover spans, so that when you hover over the info key, the text you hover over takes on this glow. The problem is that it is applying itself to the text inside the hover box as well, and I'm not sure how to fix this.
Already discussed this with TLR, but for anyone else who wants to know:
The problem with the hover code and text-shadow combination is that the span is included as part of the link, so it inherits the link's properties. You have to specify anything you want different inside of the span, including "Don't do X".
tldr; what needs to happen is "Make everything inside the link glow. Don't make the span glow."
Adding text-shadow:none; in the a.info span area corrects the problem.
*tracks because also curious*
<span style="text-shadow:
<span style="text-shadow: #00ffff 1px 1px 5px;">text</span>text
Replace #00ffff with any hex code. You can also change the font color in the usual way.
The numerical values adjust distance up/down, left/right, and width. Not sure if they're in that order. Width is last.
Thank you so much!
EDIT:
Hmm.. it doesn`t seem to be working on the CSS I`m trying to use it for... maybe I left out something in the coding. There aren`t supposed to be any spaces in the coding, right?Nevermind, got it! Thanks again!
Profile picture by ahimsa ♥
Pixel Wis by squeegie~
Aivilo for the win
tracking .3.
I don't get it.....
How do you do
omg...
Im so dumb
Resurrecting this thread
I'm trying to use this text effect on hover spans, so that when you hover over the info key, the text you hover over takes on this glow. The problem is that it is applying itself to the text inside the hover box as well, and I'm not sure how to fix this.
Here's my code with the glow inserted into it:
<style>a.info { position:relative; z-index:24; text-decoration:none; color:#967433; } a.info:hover { z-index:25; background-color: transparent; text-shadow: #785C26 1px 1px 1px; } a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:2em; left:2em; width:150px; color: #000000; border:2px solid #000000; background-color:#332722; text-align: left; padding: 10px; }</style>And without:
<style>a.info { position:relative; z-index:24; text-decoration:none; color:#967433; } a.info:hover { z-index:25; background-color: transparent; } a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:2em; left:2em; width:150px; color: #000000; border:2px solid #000000; background-color:#332722; text-align: left; padding: 10px; }</style>Sorry that looks so messy, not super sure how to clean it up. I am not very gifted in the realm of CSS.
This uses CSS, but it does
Already discussed this with
The problem with the hover code and text-shadow combination is that the span is included as part of the link, so it inherits the link's properties. You have to specify anything you want different inside of the span, including "Don't do X".
tldr; what needs to happen is "Make everything inside the link glow. Don't make the span glow."
Adding
text-shadow:none;in the a.info span area corrects the problem.