jQuery文字过渡效果
0
[已解决问题]
解决于 2020-10-05 08:35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../JavaScript/jquery_min.js"></script>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.login{
background-color: #f3f3f3;
padding: 0;
text-align: center;
padding-top: 15px;
height: 50px;
}
.login li{
display: inline;
list-style: none;
margin: 0 auto;
}
.login li a{
padding: 0px 20px 0px 20px;
text-decoration: none;
font-size: 20px;
color: #cccccc;
}
.active{
color: red;
transition-duration: 1s;
}
</style>
<body>
<herder>
<div class="posion">
<ul class="login">
<p><a href="javascript:;">首页</a></p>
<p><a href="javascript:;">交友</a></p>
<p><a href="javascript:;">情侣商店</a></p>
<p><a href="javascript:;">社区</a></p>
<p><a href="javascript:;">我的个人中心</a></p>
</ul>
</div>
</herder>
<script type="text/javascript">
$(document).ready(function(){
$("li").hover(
function () {
$(this).children().addClass('active')
},
function () {
$(this).children().removeClass().css('color','');
}
);
})
</script>
</body>
</html>
为什么我这个写了文字没有过渡的效果呀
最佳答案
1
因为你没有指定 transition-property
奖励园豆：5
