View Full Version : Some insight on having a box border box appear on mouseover

05-02-2011, 11:28 PM
If I wanted to have a box appear on a mouseover, will this involve CSS or javscript?

Can a person stack a white box on top of a colored box, and have the colored one displayed?

I've found dozens of sample codes regarding mouseover; however, they all seem to have an image inside, and basically you're applying a border to an image.

05-03-2011, 12:35 AM
If I wanted to have a box appear on a mouseover, will this involve CSS or javscript?

You could use just css, or just javascript or a combination of the two. It depends on what you are mousing over and where you want the box to appear. Would need more details on how you want things to look and function on your page.

Can a person stack a white box on top of a colored box, and have the colored one displayed?

yep, no problem, but need more details on how you want things to look and work.

05-03-2011, 05:22 AM
Hi bullant,

Thank you for the reply.

I have a news site -- but I'm building a new one that's clean. I would like to have a light blue box appear around text when a mouse if moved over the text. The text amounts to a two-line story headline -- which is the hyperlink, with a byline below it that says when the story was posted, followed below that with a subheader, which will tell a little bit about the story.

I'm looking at having about five of these. Each blue box will be to the right of a thumbnail.

I find lots of ideas with changing borders, but they all wrap around an image. I don't want these particular hyperlinks to change color, but if the whole parameter around the headline and byline would change that would be a real eye-catcher.

Here is the site in construction: http://www.theeagleextra.com/sophie.html

You can see the main story headlines and the blue boxes I'm talking about.

I'll be honest with you, bullant, I don't necessarily have the capacity to write this code, CSS or Javascript. I use tons of div tags because I don't know any better -- but I'm getting better. As soon as my site is launched, I'm going to turn around and improve the code -- you have my word on it. Including an external style sheet.

Magic blue boxes is about all I have left to figure out to get my page up and running. If you can help, it would be very much appreciated.


05-03-2011, 05:48 AM
Maybe use this demo as a guide.

Basically, I give the container holding the link and text a class name of thumbTeasers and then just change the border colour from light blue to navy blue when you mouser over the div.

So "in theory", if I understand you correctly all you need to do is give your link and text containers (<div id="topictext1">) a class name and then apply the styles to that class as in this demo. Obviously, change the colour, width and padding styles to suit your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.thumbTeasers {
width: 13em;
padding: 10px 10px 10px 10px;
border: 2px solid rgb(135,198,200);
.thumbTeasers:hover {
border-color: rgb(0,0,128);
<script type="text/javascript"></script>
<div class="thumbTeasers">
<a href="wherever">
Fishing the waters for a fuel oil spill – Rural Fairfax
The Eagle Extra
<div>Posted 5-2</div>
<div>This is a byline for more information about story</div>

05-03-2011, 03:01 PM
bullant, this is amazing -- thank you!

I'm styling it now and will give an update this afternoon with the results.

Thank you again. I very much appreciate your help and insight.

05-03-2011, 03:46 PM
you're welcome :)

05-03-2011, 04:57 PM

it works perfectly!

take a look at your magic boxes in action: http://www.theeagleextra.com/sophie.html

i was going to wait until later this afternoon to style it, but i just couldn't wait. now it's back to printing orders for my customers. i'll be working on my site more this afternoon.

i don't know why, but my w3c validation logo isn't a hyperlink in ff and chrm. i have a white border around it to cover up their blue border, maybe that's why it doesn't work in those browsers. i tried applying border="0" and it worked, but then it no longer passed validation.

okay, see you later. thank you again!

05-04-2011, 12:25 AM
no problem :)

It's not obvious to me how you added a white border on top of the image's blue border and yes that is probably why the validation logo image is not a clickable link in at least FF4 (it is in IE9)

But to remove that annoying border that appears on images when they are wrapped in an <a> you can remove it using css. If you adding border="0" caused a validation error, I suspect then that you added it to the <img>.

To fix your validation logo link try commenting out whatever you did to add the white border and then in your css add

#w3c img {
border: none;
}That should remove any borders in all images in an element with id="w3c"

05-04-2011, 01:46 AM

It worked to code-out the border!

I never thought of commenting out a piece of code for troubleshooting or testing. I was always copying it to notepad and then deleting it and then putting it back again. Thanks for the new tip. I'll use it from now on.

I commented-out my border code, which was right below my w3c css code, and the blue border appeared. Then I added your fragment and the border went away. That's pretty neat.

This code learning is truly amazing and I'm enjoying the daylights out of it.

I hope to power up the new front page by tomorrow morning -- hopefully. I still have a good eight hours or so left to go.

Thanks again, bullant.

05-04-2011, 01:51 AM
you're welcome :)

Whether you comment out code or delete it depends on the circumstances. If I have code that is working and I just want to add/tweak something and am not sure if it will work, I usually comment out relevant code, make my changes and if they work then I delete the commented out code. If they didn't work, I remove the comment tags and the changes I made and I'm back to where I was before making the changes.