jquery使用div块制作的按钮

来源：互联网发布：淘宝盗图修改技巧编辑：程序博客网时间：2024/06/07 05:13

<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" onclick="showstulist()">
<span id="stumana">jquery按钮</span>
</div>
</body>
</html>

0 0