Strange behaviour with jquery hover function
Question
I have the following:
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".firstlevel").hover(
function()
{
$(this).find("li")
.css({"display": "block",
"margin-left": "120px",
"list-style-type": "circle"});
},
function()
{
$(this).find("li")
.css({"display": "none",
"margin-left": "120px",
"list-style-type": "circle"});
});
});
</script>
<style>
.firstlevel
{
list-style-type:disc;
margin-left:40px;
}
.firstlevel li
{
list-style-type:square;
margin-left:80px;
}
</style>
</head>
<body>
<ul>
<li class="firstlevel"><a href="#">One</a>
<ul>
<li><a href="#">One-One</a></li>
<li><a href="#">One-Two</a></li>
</ul>
</li>
<li class="firstlevel"><a href="#">Two</a>
<ul>
<li><a href="#">Two-One</a></li>
<li><a href="#">Two-Two</a></li>
</ul>
</li>
</ul>
</body>
</html>
The idea is that I should hover over the 'One' and 'Two' links and see the sublinks appear and disappear, using the jquery hover function. I also want to see that the list style of the sublinks changes to a circle, and the sublinks become more indented.
What is odd is that when I do the mouseover, the indentation of the sublinks does change as expected, but the bullets to the sublinks disappear altogether. This happens in Chrome, but not in IE.
On inspection, it looks like Chrome's user agent stylesheet is overwriting my set styles.
Does anyone have any idea why this would be happening?
1 answers
solution1
1 2010-12-27 07:14:05
我会尝试使用一个类来控制显示： http : //jsfiddle.net/keegan3d/WZJt2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.