的jQuery的mouseenter（）和鼠標離開（）無法正常工作

我有兩個簡單的腳本的HTML：的jQuery的mouseenter（）和鼠標離開（）無法正常工作

<html> 
<body> 
<style> 
.myBtn{ 
    display: none 
} 
.myBtnReg{ 
    display: block 
} 
</style> 
<button class="myBtnReg" id="btn1" >Click Me!</button> 
<script src="jquery-1.11.2.min.js"></script> 
<script src="js.js"></script> 
</body> 
</html>

和javascript：

$(function(){ 
    $("button").mouseenter(function(){ 
     $(this).attr("class", "myBtn"); 
    }); 
    $("button").mouseleave(function(){ 
     $(this).attr("class", "myBtnReg"); 
    }); 
});

我試圖讓效果在按鈕的變化當鼠標進入鼠標類並在鼠標離開時將它改回來時，上面的代碼似乎不能正常工作，當我將鼠標放在閃爍的按鈕上時，所以我認爲我因爲某種原因不斷改變類。

來源

2016-04-24 Vadim Tatarnikov

這是因爲你改變顯示屬性，當按鈕消失，鼠標離開火災，那麼它再次出現，而火災的mouseenter，使其dissapear等，你會得到「閃爍」 – adeneo

好教訓... –

謝謝！我不知道爲什麼我沒有想到 –

你可以把button內div然後toggleClass的button，當你將鼠標懸停在div（你還需要設置固定高度上格）

$('div').hover(function() { 
 
    $(this).find('button').toggleClass('myBtn'); 
 
});

div { 
 
    height: 50px; 
 
} 
 
.myBtn { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button class="myBtnReg" id="btn1">Click Me!</button> 
 
</div>

來源

2016-04-24 13:18:23

在這種情況下，使用'visibility'代替'display'可能會更好，因爲那樣你就不需要使用固定的高度。 –

我同意但OP想改變'display'，所以我認爲這是比較合適的答案。 –

但是'div'容器的結果與'visibility'相同，只是必須設置一個固定的高度，並且寬度有一個更大的活動範圍，因爲'div'具有顯示'block'和'button'是'inline-block'。 –

你的風格應該是像

.myBtn{ 
    background-color:RED; 
} 
.myBtnReg{ 
    background-color:Green; 
}

您的總HTML是這樣

<html> 
<body> 
<style> 
    .myBtn{ 
     background-color:RED; 
    } 
    .myBtnReg{ 
     background-color:Green; 
    } 
</style> 
<button class="myBtnReg" id="btn1" >Click Me!</button> 
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
<script src="js.js"></script> 
</body> 
</html>

來源

2016-04-24 13:43:30 Bibhuti

OP不想改變顏色，但要顯示和隱藏「按鈕」 –

歡迎使用堆棧溢出！這並不能提供原始海報（OP）所提問題的答案。我建議編輯你的答案，爲OP的問題提供一個很好的答案。 –

的jQuery的mouseenter（）和鼠標離開（）無法正常工作

回答

相關問題