ホバーページの背景色のフェード効果の変更（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

でこれを追加します。

私が行ったのは、トランジションを設定し、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にいくつかのプロパティを削除し、背景色は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。 net/rae0724/k3bkbpg7/2/ これで動作しますが、私が移動する場所は正確ではありません。私は何も浮かんでいなくても、緑を見せています。 – demoncoder

私のコードを更新してください。 –

ホバーページの背景色のフェード効果の変更（CSSまたはjQuery）

答えて

関連する問題