我有以下代码
<div id="wrapper">
<div id="article">
<a href="#">Here is a text containg something</a>
</div>
</div>
<style>
#wrapper {
height:200px;
width:500px;
background:url(http://3.bp.blogspot.com/-06iGd_Ue9dk/UqPzuA1Kw7I/AAAAAAAACPc/hBtKtRBSDGE/s1600/Pattern-call.png);
-moz-transition: background-color 2s linear;
transition: background-color 2s linear;
}
#article {
background: url("http://4.bp.blogspot.com/-5BAxq07aDQA/UgdY3Mk8spI/AAAAAAAAB84/ElxocGOzgYA/s1600/Opacity.png") repeat scroll 0 0 rgba(0, 0, 0, 0.4);
margin-top:50px;
margin: 0 auto;
width: 100px;
padding:10px;
position: relative;
top:60px;
}
#article a {color:#fff;
text-decoration:none;
}
.hover {
background:rgba(0, 0, 0, 0.4) !important;
}
</style>
<script>
$('#wrapper > div').hover(function(){
$(this).parent().toggleClass('hover');
})
</script>
我现在面临两个问题 - 1.我不想要悬停时的淡入淡出效果，而是背景颜色会从左边开始到右边结束的过渡。 (正如我们在加载效果中看到的) 2. 其次，随着背景变化完成，我希望浏览器将用户重定向到 anchor 链接(光标仍处于悬停状态)
我在设置两者时遇到问题。您的帮助将不胜感激。
这是我制作的 jsfiddle http://jsfiddle.net/MjkC5/1/供大家引用。
终于找到了我想要过渡的东西的链接，请参阅此页面 http://bloggingstory-shameer.rhcloud.com/sample-post-for-ghost/查看背景如何随着页面加载而变化我想要相同的效果。 CSS 更可取，但我也不介意 Jquery。
最佳答案
以下代码完全符合您的要求。看看是否有帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.animated_div').animate({ 'width':'300px' }, 2000);
})
</script>
<style type="text/css">
.wrapper {width:300px; height:100px; background:#000; position:relative;}
.animated_div {position:absolute; top:0px; left:0px; width:0px; height:100px; background:#BABABA;}
</style>
</head>
<body>
<div class="wrapper">
<!--you can put anything inside here-->
<div class="animated_div">
</div>
</div>
</body>
</html>
谢谢
关于javascript - 使背景颜色过渡不褪色并悬停特定时间以单击元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21807426/