[jQuery] ie7 hover issue
[jQuery] ie7 hover issue
NOTE: This isn't a jQuery issue per se, but I'm hoping that someone here may
be able to help me.
I've noticed that IE7's native hover (mouseover/out) detection changes if a
negative margin is applied. With a negative margin, only the text in a div
is 'hoverable'. With a non-negative margin, the entire div is 'hoverable'.
At first, I thought my jQuery hover code was faulty, but the example below
shows that the css:pointer behavior changes with the margin setting.
Can someone suggest a hack to make the hover detection consistent regardless
of margin? (Note: remove #side-menu DIV.active {margin-left:-5px} to see
the difference.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>hover issue</title>
<style type="text/css">
.hoverable { cursor: pointer; }
#side-menu { float: left; width: 250px; font-size: 12pt; font-weight: bold;
}
#side-menu P { padding: 0px 5px 0px 5px; font-size: 10pt; font-weight:
normal; }
#side-menu DIV { border: silver 1px solid; padding: 5px;
cursor: pointer; background: whitesmoke; color:
dimgray; margin-left: 0px; }
#side-menu DIV.active { cursor: default; background: white; color: black;
border-right: none; margin-left: -5px; }
#side-menu DIV.hover { color: black; border-right: none; margin-left: -5px;
}
</style>
</head>
<body>
<div id="side-menu">
<div class="hoverable tab-item">
item 1
item 1 text.
</div>
<div class="active hoverable tab-item">
item 2
item 2 text.
</div>
<div class="hoverable tab-item">
item 3
item 3 text.
</div>
<div class="hoverable tab-item">
item 4
item 4 text.
</div>
</div>
</body>
</html>
--
View this message in context: http://www.nabble.com/ie7-hover-issue-tf3526072s15494.html#a9837987
Sent from the JQuery mailing list archive at Nabble.com.