473,503 Members | 3,171 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 1883
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
3366
by: LRW | last post by:
Below I'll paste my CSS and the HTML in question. But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's...
4
8490
by: Doors of Perception | last post by:
As you probably know, when you click on a link in MSIE and go to a page, then when you click the "back" button, you see a dotted box outlining the link on which I just clicked. As far as I'm...
20
33786
by: Chris Bradbury | last post by:
Hi, I'm posting in this forum for the first time so if I break any conventions or protocols I'm sorry. I've attached this style: *:focus { outline: none } to a page but it doesn't remove...
12
4994
by: Sander Tekelenburg | last post by:
Trying to make some images disappear on hover (works), and others appear on hover (works not). In tested browsers, this gives the expected result: IMG.disappear {visibility: visible}...
6
4921
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to...
8
12778
by: JLahm | last post by:
I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...
1
1334
by: false-name | last post by:
is this a known IE bug/quirk ? a not-very-complex web page with several <div> ( some of those <div> nested ) with navigation by menu links down the left and near the top using CSS a:link and...
8
2829
by: maya | last post by:
I have some links.. http://www.francesdelrio.com/linksCSS.html want it so when you hover over link ENTIRE DIV gets gray bg color (not just text (like link Three is now on this page..) but...
13
1956
RMWChaos
by: RMWChaos | last post by:
I have four pieces of code to automatically build my navigation buttons and choose which page to load: 1) a hover script, which swaps the images onmouseover and onmouseout, 2) a DOM loader, which...
0
7188
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7258
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7313
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
7441
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5558
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
3156
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
1489
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
720
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
366
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

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.