472,146 Members | 1,267 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,146 software developers and data experts.

Red Outline On Hover For Page Elements

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
2 1805
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
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.

Similar topics

7 posts views Thread by LRW | last post: by
4 posts views Thread by Doors of Perception | last post: by
20 posts views Thread by Chris Bradbury | last post: by
12 posts views Thread by Sander Tekelenburg | last post: by
8 posts views Thread by JLahm | last post: by
8 posts views Thread by maya | last post: by
reply views Thread by Saiars | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.