hovers for divs

Discussion in 'CSS' started by NewComputer, Jan 19, 2005.

0
  1. #1
    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?
     
    NewComputer, Jan 19, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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 {...}
    Code (markup):
    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 19, 2005 IP
  3. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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>
    Code (markup):
    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.
     
    J.D., Jan 20, 2005 IP
    NewComputer likes this.
  4. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #4
    Absolutely fantastic my friend,

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

    Thanks.
     
    NewComputer, Jan 21, 2005 IP