gpt4 book ai didi

JQuery - 动画按钮

转载 作者:行者123 更新时间:2023-11-28 04:15:24 25 4
gpt4 key购买 nike

我正在尝试从一个 div 制作一个简单的 JQuery 按钮,它会在滚上/滚下时改变背景颜色。

到目前为止,我的代码如下所示:

<html>
<head>
<title>Div Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("div").hover(function() {
$(this).css({'background-color' : 'yellow'});
});
</script>
<style type="text/css">
#mainButton {
color: #FFF;
width: 100px;
height: 50px;
background-color: #333;
}
</style>
</head>
<body>
<div id="mainButton">
<p align="center">Button</p>
</div>
</body>
</html>

但是,我无法让它工作。我的按钮最初显示正常,但滚动时没有黄色背景。 :-|

最佳答案

Javascript 应该是这个

$(document).ready(function(){
$("div").hover(function() {
$(this).css('background-color' , 'yellow');
});
});

如果你想让按钮在离开按钮时回到#333,你可以使用:

$(document).ready(function(){
$("div").hover(function() {
$(this).css('background-color' , 'yellow');

}, function(){
$(this).css('background-color' , '#333');
});

编辑以包含动画

这应该为背景色设置动画

$(document).ready(function(){
$("div").hover(function() {
$(this).animate({backgroundColor: 'yellow'}, 1000);
}, function(){
$(this).animate({backgroundColor: '#333'}, 1000);
});

1000 是你希望动画持续多长时间

关于JQuery - 动画按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1301952/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com