PDA

View Full Version : Applying hover effects to a div


JonnyJ
01-28-2009, 04:20 PM
Hello Everyone.

This is my first attempt at creating a website using css components.
I created a pretty basic layout consisting of a header, and two columns.

The site is for my portfolio. The left side contains links to my work, and the left column has a lengthy description of the current page.

attached is a file showing three tabs on the left area to give you a visual understanding of what im trying to achieve.

here is a piece of my html coding

<div id="bodyArea">
<div id="left">
<div id="tabex1"
<div id="thumb1"><a href="javascript:;"><img src="Images/Thumbnails/Print/TelC.jpg" alt="telcalbum" onclick="MM_openBrWindow('PrintDesign/TheElChupacabrasAlbum.html','TheElChupacabrasFull' ,'width=720,height=360')" /></a></a></div>
<div id="text1">
EL CHUPABABRAS<br />
Album Art<br />
Created double sided fold-out album for Boston based punk rock outfit.


this contains the main div(inside the wrapper) body area. inside body area I have the left and right columns. what you see is the left column and the code for my first tab.

I'm trying to make the tab have a border around the entire "tabex1" from a mouse rollover.

I tried a few different options. First I created a new rule for "tabex1 :hover" and applied a border. this did not work. I also tried left :hover. When I did this it put a border around every div seperately.

does anyone have any advice? i apologize for my rambling...I've been up all night working on this and need a caffeine fix.

coloeagle
01-28-2009, 04:37 PM
Not sure I completely understand your question.

Tough to know for sure with what you have posted.

Is tabex1 a complete content div or just a link?

Do you have a url for the page?

JonnyJ
01-28-2009, 04:41 PM
http://colorblinddesigner.com/printdesign.html

sorry I should have posted that first and foremost.

As you can see, when you rollover a tabbed area, it highlights around the text, as well as the image. once the mouse goes inside the div, the text and the image also get highlighted.

coloeagle
01-28-2009, 04:51 PM
OK, so what you want is to have the hover border only around the tabex div and not the image or words inside?

JonnyJ
01-28-2009, 04:54 PM
yes, and this I can do, but as you can see by my site, once a piece is highlighted, the alignment moves.

I tried making a border on these when there is no "hovering", but then when I hover there is no longer a border.

does this make sense?

I apologize, english is not my first language!

coloeagle
01-28-2009, 05:02 PM
I think I receive you now, but to clarify.

You don't want a border around the div until it is moused over and no other borders inside the div.

You want the image and the text to stay positioned and not shift.

(Your English is fine, just a little confusion on web terminology)

JonnyJ
01-29-2009, 03:20 PM
yes! that is correct.

I've tried a few more attempts, but continue to achieve the same results every time.

coloeagle
01-29-2009, 04:01 PM
What your wanting requires div swapping. Requires the use of JavaScript and two div's.

Check this page out, http://www.willmaster.com/library/javascript/mouseover_div_swap.php

JonnyJ
02-02-2009, 03:26 PM
oh cool, that was more or less what I needed to read. Thanks for all of your adivising throughout this!

coloeagle
02-02-2009, 10:58 PM
Your welcome,

Looks good :)