Online Advertising - Loans - Real Estate Investing - Bad Credit Personal Loans - Mortgage Calculator

PDA

View Full Version : hovers for divs


NewComputer
Jan 19th 2005, 5:56 pm
is it possible to have a hover (I know hovers are for text only) or a mouse over a div without using javascript? I want to have a link within a div but have a mouse over for the entire div, but without the js. Is this is CSS2 option?

J.D.
Jan 19th 2005, 7:41 pm
is it possible to have a hover (I know hovers are for text only) or a mouse over a div without using javascript? I want to have a link within a div but have a mouse over for the entire div, but without the js. Is this is CSS2 option?IE doesn't support the hover pseudo class on anything but anchors. There's a simple workaround, though. Make your <a> elements that you use in the menu to display as blocks:

div.my-menu-item {border: none;...}
div.my-menu-item a {display: block; ...}
div.my-menu-item a:hover {...}You will also need to make your <a>'s similar in style to what your div's used to be (e.g. border, padding, etc). Div's in this scheme are just containers for <a>'s and don't have much to show, may be except for background. That's it - no JavaScript.

There's another caveat with IE, but it only applies if you build horizontal menus using tables.

J.D.

J.D.
Jan 20th 2005, 7:57 pm
Ok, a couple of people have PM'ed me asking for a sample. Here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Anchor Test</title>
<style type="text/css">
div.c1 {width: 150px; padding: 2px 5px; border: 1px solid #999; margin: 5px;}
div.c1 div {margin: 5px 0;}
div.c1 table {border-collapse: collapse; border: none; width: 100%;}
div.c1 table td {padding: 2px 0;}
a {
text-decoration: none;
display: block;
padding: 2px 5px;
background-color: #EEEEEE;
border: 1px solid blue;
width: 138px; /* bug in IE; must be in px (150-(5+5)-(1+1)) */
}
a:hover {background-color: #FFEEAA; cursor: pointer; border: 1px solid red;}
</style>
</head>

<body>

<div class="c1">
<table>
<tr><td><a href="anchor.asp">Menu Item 1</a></td></tr>
<tr><td><a href="anchor.asp">Menu Item 2</a></td></tr>
</table>
</div>

<div class="c1">
<div><a href="anchor.asp">Menu Item 1</a></div>
<div><a href="anchor.asp">Menu Item 2</a></div>
</div>

</body>
</html>There are two menus here, one with tables and one with divs. There's a nasty bug in IE and a workaround is to specify <a>'s width in px (normally not required for a block element).

J.D.

NewComputer
Jan 21st 2005, 5:18 am
Absolutely fantastic my friend,

I have been searching for this for so long. It is perfect. I appreciate the effort.

Thanks.