Jquery——hover与toggle

最新推荐文章于 2022-06-01 21:41:11 发布

weixin_34018202

最新推荐文章于 2022-06-01 21:41:11 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lianzi/archive/2011/08/01/2124312.html

本文通过两个实例展示了jQuery中hover与toggle方法的应用。hover方法可在鼠标悬停时触发不同事件，而toggle方法则实现了点击时在多个方法间切换的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hover方法的语法结构为：hover（enter，leave）

hover()当鼠标移动到元素上时，会触发第一个方法，当鼠标移开的时候会触发第二个方法

<html>
<head>
<title>测试用</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript">
            window.onload=init;
function init(){
                $("#panel h5.head").hover(function(){
                    $(this).next().hide();
                },function(){
                    $(this).next("div .content").show();
                });
            }
</script>

</head>
<body>
<div id="panel">
<h5 class="head">什么事jquery</h5>
<div class="content">
             混蛋
</div>
</div>

</body>
</html>

toggle(fn1,fn2,fn3..）这个方法是每次单击调用下一个方法，如果方法是最后一个，那么从第一个开始

如果只有2个方法，则是互相切换效果。

<html>
<head>
<title>测试用</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript">
            window.onload=init;
function init(){
                $("#panel h5.head").toggle(function(){
                    $(this).addClass("highlight");
                    $(this).next().hide();
                },function(){
                    $(this).removeClass("highlight");
                    $(this).next("div .content").show();
                });


            }
</script>
<style type="text/css">
            .highlight{
                background:#ff3300;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么事jquery</h5>
<div class="content">
             混蛋
</div>
</div>

</body>
</html>