jquery使用div块制作的按钮

最新推荐文章于 2022-11-15 22:15:00 发布

四四七七

最新推荐文章于 2022-11-15 22:15:00 发布

阅读量464

点赞数

本文链接：https://blog.youkuaiyun.com/u012541312/article/details/23657609

版权

本文介绍了一个使用jQuery实现的按钮交互效果示例，包括鼠标悬停和点击时的样式变化。

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

<html>
<head>
<title>jquery按钮</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
<script src="js/jquery-1.9.1.min.js"></script>
<style>
#mystu{
width: 100px;height: 25px;color: #ffffff;border: 2px outset;border-radius: 5px;text-align: center;
background-color: silver;font-size: 12px;font-weight: bold;padding: 10px 0px 0px;}
#stumana{display: inline-block;width: 80px;height: 20px;border: 2px #ffffff;}
</style>
<script>
function showstulist(){
$("#mystu").css("border","3px inset");
}
$(function(){
$("#mystu").mouseover(function(){
$(this).attr("class","text-shadow");
$(this).css("background-color","gray");
$("#mystu").css("border","3px outset");
});
$("#mystu").mouseout(function(){
$(this).attr("class","");
$(this).css("background-color","silver");
$("#mystu").css("border","2px outset");
});
});

</script>
</head>
<body>
<div id="mystu" οnclick="showstulist()">
<span id="stumana">jquery按钮</span>
</div>
</body>
</html>