鼠标事件界面转换 mouseover() 方法
mouseover() 方法
<html>
<head>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
</head>
<body>
<p >请把鼠标指针移动到这个段落上。</p>
</body>
</html>
jQuery 效果 - 隐藏和显示
<!DOCTYPE html>
<html>
<head>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
两个结合之后的代码
$(function() {
$("#tzgg1").addClass('title_h2');//设置其中一个初始时的效果
});
$(document).ready(function() {
$("#tzgg1").mouseover(function() {
$("#tzgg1").addClass('title_h2');
$("#gzdt1").removeClass('title_h2');
$("#tzgg2").show();
$("#gzdt2").hide();
$("#tzgg3").show();
$("#gzdt3").hide();
});
$("#gzdt1").mouseover(function() {
$("#gzdt1").addClass('title_h2');
$("#tzgg1").removeClass('title_h2');
$("#gzdt2").show();
$("#tzgg2").hide();
$("#gzdt3").show();
$("#tzgg3").hide();
});
});
共同学习，写下你的评论
评论加载中...
作者其他优质文章
