我试图弄清楚在更改时让背景颜色淡入淡出。但是没有这样做。不知道我是否应该使用CSS或jQuery。请看看,谢谢。悬停页面背景更改颜色淡入淡出效果(css或jQuery)
.wrapper {
width: 100%;
}
.left-col,
.right-col {
width: 50%;
float: left;
}
a.btn {
background: #fff;
display: inline-block;
}
a.btn:before {
background-color: transparent;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
a.btn:hover:before {
content: '';
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
a.btn.btn-1:hover:before {
background-color: red;
}
a.btn.btn-2:hover:before {
background-color: green;
}
<div class="wrapper">
<div class="left-col">
<a href="#" class="btn btn-1">Button 1</a>
</div>
<div class="right-col">
<a href="#" class="btn btn-2">Button 2</a>
</div>
</div>
更新jquery的小提琴这里: http://jsfiddle.net/rae0724/k3bkbpg7/2/ 它的工作了,但我徘徊的地方是不准确的。 即使我没有悬停任何东西,它仍然显示绿色。
是的!这个工作很好!谢谢!! – demoncoder
我绝对高兴! :) –