<style>.entered{font-size:36px;width:200px;height:100px;}#test{border:2px solid red;background:#fdd;width:60px;height:60px;}</style></head><body>
<div id="test">移进来</div>
<script>
$("#test").bind("mouseenter mouseout",function(event){
$(this).toggleClass("entered");
alert("鼠标指针位于(" + event.pageX + "," + event.pageY + ")");
});
</script>上面这个简单的jquery,issu1.entered{font-size:36px;width:200px;height:100px;}font-size:36px;起作用了 ，为何width:200px;height:100px; 没有起作用？issue2$(this).toggleClass("entered");为何在alert("鼠标指针位于(" + event.pageX + "," + event.pageY + ")");的后面运行？如何让 $(this).toggleClass("entered"); 运行完成后，执行alert?
1 回答
交互式爱情
TA贡献1712条经验 获得超3个赞
issue1: css权重问题；id选择器优先于class选择器；
issue2: toggleClass已经执行，只是alert中断了样式的重绘；
你可以在toggleClass中使用function，在function中打印日志，然后会发现日志打印成功，然后alert，然后alert关闭后，样式变更才生效
添加回答
举报
0/150
提交
取消