[英]Using JQuery or CSS how can I change the color of a box slowly on hover?
使用JQuery,如何在悬停时缓慢更改框的颜色?
我尝试使用下面的一个,但是如何将鼠标悬停时将框的颜色慢慢更改为红色?
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready( function() {
$(".box").hover(function(){
$(".box").fadeIn("slow");
},
function(){
$(".box").fadeOut();
});
}
</script>
<style>
.box {
background-color: #000;
}
</head>
<body>
<div class="box">
Box
</div>
</body>
</html>
使用CSS3:
.box {
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
.box:hover {
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
添加jQuery UI并为颜色设置动画,例如:
$(".box").hover(function () {
$(".box").fadeIn("slow").animate({
backgroundColor: 'red'
});
}, function () {
$(".box").fadeOut();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.