懸停頁面背景更改顏色淡入淡出效果（css或jQuery）

我試圖弄清楚在更改時讓背景顏色淡入淡出。但是沒有這樣做。不知道我是否應該使用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/ 它的工作了，但我徘徊的地方是不準確的。即使我沒有懸停任何東西，它仍然顯示綠色。

來源

2016-08-15 demoncoder

背景顏色是CSS可轉換/動畫屬性。

我所做的只是設置了轉換，並使用JQuery添加/刪除某些導致該元素背景顏色改變的類。

看一看我CodePen這裏： http://codepen.io/jarodsmk/pen/EyAOdN

HTML：

<body> 
    <h1>Mouse over a color</h1> 
    </br> 
    <div class="blue">Blue</div> 
    <div class="green">Green</div> 
</body>

CSS：

body{ 
    background-color: red; 
    transition: background-color 4s; 
} 

.blue,body.blue{ 
    background-color: blue; 
} 

.green,body.green{ 
    background-color: green; 
}

JS：

$('.blue').hover(function(){ 
    $('body').addClass('blue'); 
}, function(){ 
    $('body').removeClass('blue'); 
}); 

$('.green').hover(function(){ 
    $('body').addClass('green'); 
}, function(){ 
    $('body').removeClass('green'); 
});

來源

2016-08-15 12:21:27

是的！這個工作很好！謝謝！！ – demoncoder

我絕對高興！ :) –

剛剛從:hover:before刪除一些CSS屬性，並添加這a.btn:before

.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: background-color 0.5s ease,opacity; 
 
    content: ''; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    z-index:-1; 
 
    opacity:0; 
 
} 
 
a.btn:hover:before { 
 
    position:fixed; 
 
    transition: background-color 0.5s ease ,opacity; 
 
    opacity:1; 
 
} 
 
a.btn.btn-1:hover:before { 
 
    background-color:red; 
 
} \t \t \t 
 
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>

來源

2016-08-15 12:18:35

的http：//的jsfiddle。淨/ rae0724/k3bkbpg7/2/ 現在正在工作，但我懸停的地方並不準確。即使我沒有徘徊，它仍然顯示綠色。 – demoncoder

更新我的代碼.. –

懸停頁面背景更改顏色淡入淡出效果（css或jQuery）

回答

相關問題