如何將.hover效果添加到div？

Question

我很新的編程，但我似乎不能添加效果使用jquery。

$(document).ready(function() { 
 
    $('.mainr').hover(
 
    function() { 
 
     $(this).addClass('.mainh') 
 
    }, 
 
    function() { 
 
     $(this).removeClass('mainh') 
 
    }); 
 
});

.main { 
 
    position: absolute; 
 
    left: 20%; 
 
    width: 60%; 
 
    height: 500px; 
 
    background-color: #D8D8D8; 
 
    color: #ffffff; 
 
} 
 
.mainr { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 50%; 
 
    width: 23%; 
 
    height: 50%; 
 
    border-radius: 50%; 
 
    background-color: #0B0B3B; 
 
    float: left; 
 
    color: #D8D8D8; 
 
    text-align: center; 
 
    vertical-align: 50%; 
 
    font: 20px"Interstate", "Lucida Grande", Arial; 
 
} 
 
.mainh { 
 
    position: absolute; 
 
    left: 0%; 
 
    top: 50%; 
 
    width: 23%; 
 
    height: 50%; 
 
    border-radius: 50%; 
 
    background-color: #D8D8D8; 
 
    float: left; 
 
    color: #0B0B3B; 
 
    text-align: center; 
 
    vertical-align: 50%; 
 
    font: 20px"Interstate", "Lucida Grande", Arial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="mainr">Register</div> 
 
</div>

，可能你還告訴mehow居中格中的文本（設置高度）

感謝，

Answer 1

您可以通過CSS做到這一點。無需JS的：

試試這個：

.mainr:hover { 
    position: absolute; 
    left: 0%; 
    top: 50%; 
    width: 23%; 
    height: 50%; 
    border-radius: 50%; 
    background-color: #D8D8D8; 
    float:left; 
    color: #0B0B3B; 
    text-align:center; 
    vertical-align:50%; 
    font: 20px "Interstate","Lucida Grande",Arial; 
} 

更換.mainh與.mainr:hover，這會爲你工作，沒有任何JS。乾杯！！！

編輯：

在您的JS代碼有小的失誤：

$('.mainr').hover(
function() { 
    $(this).addClass('mainh'); 
}, 
function() { 
    $(this).removeClass('mainh'); 
} 
); 

試試上面這會工作。

問題是$(this).addClass('.mainh');在這一行你寫.mainh應該是mainh。在JS中，如果您是類名稱，則不需要將.給予類，這意味着您正在使用它。 .僅用於選擇器。

Answer 2

我已經更新您的fiddle

爲了使用jQuery添加CSS懸停效果，你可以做$(this).css('PROPERTY','VALUE') }

Answer 3

添加懸停狀態的元素是杜蘭容易。讓我們用一個不透明的變化爲例：

div 
{ 
opacity:1.0; 
} 
div{ 
opacity:0.5 
} 

但是，如果我們想要有一個懸停狀態什麼適用於一切，但元素實際上正在上空盤旋？ （例如，其它相鄰兄弟的div）

假設這個基本的HTML：

<section class=parent> 
<div></div> 
<div></div> 
<div></div> 
</section> 

我們將應用當前的CSS屬性於母公司所有的孩子當父是處於懸停狀態。

.parent:hover > div { 
    opacity: 0.5; 
} 

然後，當父徘徊和個人DIV盤旋，我們碰到不透明度回來了，給我們正在尋找的最終效果。

.parent:hover > div { 
    opacity: 1.0; 
} 

Answer 4

如果你想留在jQuery的，你必須糾正你的錯誤，你的addClass呼叫刪除.：

$('.mainr').hover( 
    function(){ $(this).addClass('mainh') }, 
    function(){ $(this).removeClass('mainh') } 
); 

jsFiddle

但最簡單的解決方法是使用CSS像在@CodeLღver answer

Answer 5

你忘了添加Jquery庫，代碼中有一個錯誤。當你addClass你不必把（點）爲that.Actual代碼會是這樣

$(document).ready(function() { 
    $('.mainr').hover(
    function() {$(this).addClass('mainh')}, 
    function() {$(this).removeClass('mainh')} 
); 
}); 

Answer 6

首先，確保你有包括jQuery庫。

而且你可以嘗試使用，而不是addClass toggleClass和removeClass

$(document).ready(function(){ 
    $('.mainr').hover( 
     function(){ 
      $(this).toggleClass('mainh'); 
     } 
    ); 
}); 

並以垂直中心在div裏面的單詞，只需添加下列三種線路的DIV + CSS

display: flex; 
flex-direction: column; 
justify-content: center; 

演示：http://jsfiddle.net/d5t2fLLh/1/