jQuery文字过渡效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="https://q.cnblogs.com/q/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="https://q.cnblogs.com/q/129078/javascript:;">首页</a></p>

<p><a href="https://q.cnblogs.com/q/129078/javascript:;">交友</a></p>

<p><a href="https://q.cnblogs.com/q/129078/javascript:;">情侣商店</a></p>

<p><a href="https://q.cnblogs.com/q/129078/javascript:;">社区</a></p>

<p><a href="https://q.cnblogs.com/q/129078/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>

为什么我这个写了文字没有过渡的效果呀

回答

因为你没有指定 transition-property

以上是 jQuery文字过渡效果 的全部内容, 来源链接: utcz.com/a/54545.html

回到顶部