<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3"href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
当我将鼠标悬停在 <a>
上时,代码会是怎样的?它将显示 <h2>
?所以.3
会显示 .1
?
这是我到目前为止尝试过的:
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$(this).children('.h2').show();
},
function() {
$(this).children('h2').hide();
}
);
});
</script>
最佳答案
这是您的测试用例的示例,您应该为您的实际应用改进它。
JSFiddle 链接:click here
$(document).ready(function(){
$("#side h2").hide();
$("#side ul li a").mouseover(function() {
if($(this).hasClass("3")) {
$("#side h2.1").show();
} else if($(this).hasClass("4")) {
$("#side h2.2").show();
}
}).mouseout(function() {
if($(this).hasClass("3")) {
$("#side h2.1").hide();
} else if($(this).hasClass("4")) {
$("#side h2.2").hide();
}
});
})
JSFiddle 链接:click here
关于javascript - 悬停时显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10541586/