Red Outline On Hover For Page Elements

J

Joel Byrd

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.
 
I

Ian Collins

Joel said:
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.
 
J

Joel Byrd

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top