1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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