By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,071 Members | 1,244 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,071 IT Pros & Developers. It's quick & easy.

Red Outline On Hover For Page Elements

P: n/a
I want to get a red outline around different divs on a page when I
hover the mouse over them, and then have the red outline disappear on
mouse out (basically to indicate that various elements on the page are
"active"). Does anyone know how to do this, or know the best way to
do this? Any help with this would be fantastic.
OPTIONAL READING
I'm thinking of doing it this way: when I hover over an element, I
find the dimensions (width/height) and location (top/left) of that
element, and then create a transparent div with a thick red border,
then set the dimensions and location of that div to the existing div
I'm hovering over, and finally make the red outline div appear
(display: block); onmouseout, the red outline div would disappear
(display: none). In theory, this sounds good, but implementing it
cross-browser or at all gives some not-so-desirable results (e.g.
there's something going on with the mouseover and mouseout - the red
border div flickers when I hover over an element). It would be nice
if I could just use the outline css property, but unfortunately, I
don't think it's cross-browser.

Jan 28 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Joel Byrd wrote:
I want to get a red outline around different divs on a page when I
hover the mouse over them, and then have the red outline disappear on
mouse out (basically to indicate that various elements on the page are
"active"). Does anyone know how to do this, or know the best way to
do this? Any help with this would be fantastic.
Use an invisible border style for the divs and swap it to a visible one.

--
Ian Collins.
Jan 28 '07 #2

P: n/a
Use an invisible border style for the divs and swap it to a visible one.

Hey Ian, thanks for the suggestion.

This would be a fairly easy solution, but the only problem is when the
divs already have a border - then I'm interfering with the existing
border. And for the divs that don't have a border, giving them an
invisible border will slightly change the space that they take up
(like if I give a div a 4px border, it will be 4px thicker all
around), and I want this to have the least interference as possible,
as I'm trying to integrate this into existing web page templates.

Joel

Feb 1 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.