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.
2  1892 
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.
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
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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 with no
underline and then an underline for hover...but oddly, only ONE link will
actually show the underline on hover. All the rest, even with the...
|
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 aware, no versions of Opera support this desired capability
natively, so I've experimented, as best I could, with using a custom CSS
file which...
|
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 the dotted lines (surrounding links that
|
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}
IMG.disappear:hover {visibility: hidden}
this does not:
IMG.appear {visibility: hidden}
IMG.appear:hover {visibility: visible}
|
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 display the
repositioned block.
See an example at http://www.digitalrat.co.uk/test2/index.html
Can anyone explain what IE thinks it's doing?
...
| | |
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 and style, while
the hover class has a different color and style. I have the entries:
a:link .image {
border-color: #151515;
border-style:...
|
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 a:hover
to modify link color and background-color
running on WinXP SP2
|
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 when hover over it, can only do so link (text) gets bg color, not
entire div.. which of course is no good b/c it only highlights text, not
block..
|
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 automatically creates and removes DOM elements, 3) a nav script, which builds the nav buttons depending on the page being viewed, and 4) a page loader...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
