クリックしてマウスを動かさない場合、ボタンの色は赤のままになります。私が達成したいのは、クリックしてマウスを動かさないで、.hoverクラスを削除/切り替えることです。
$(function() {
var $Btn = $('.button');
$Btn.hover(function() {
$(this).toggleClass("hover");
});
$Btn.on("click", function() {
$(this).toggleClass('active')
$('.move').toggleClass('angle');
});
});.move {
border: 1px solid #000000;
padding: 10px;
transition: transform .2s ease;
/*
have noticed issue is in "transition"
*/
}
.button.hover {
color: red;
}
.angle {
transform: translate(100px, 0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="move">
<button class="button">on click still red?</button>
</div>hoverマウスが実際に動かされるまでブラウザがホバーアウト（またはマウスアウト）を呼び出していないように見えるため、ボタンがクリックされた後（およびコンテナが変換された後）でも、要素はクラスを保持します。
これを修正する1つの方法は、ボタンのイベントハンドラーhover内のクラスを削除することclickです。ただし、これを機能させるには、hoverイベントハンドラーのコードを変更して、マウスオーバー（ホバーイン）でクラスを追加し、マウスアウト（ホバーアウト）でクラスを削除する必要があります。これが必要なのは、現在のコードに従ってhover、クリックイベントハンドラー内でクラスが削除されても、マウスを再び動かした瞬間に元に戻されるためです（その時点で、のハンドラーhoverはのクラスを認識しないためです。素子）。
いずれかの別の使用して-コードへの変更は、実際には2つの方法で行うことができますmouseoverし、mouseout（私のオリジナルバイオリンのように）の機能をかへの2つの別々の機能を渡すことによってhover、ハンドラ。2つの関数が渡されると、最初の関数はホバーインで呼び出され、2番目の関数はホバーアウトで呼び出されます。
$(function () {
var $Btn = $('.button');
$Btn.hover(function () {
$(this).addClass("hover");
},function () {
$(this).removeClass("hover");
}); /* first function is executed on mouseover, second on mouseout */
$Btn.on("click", function () {
$(this).removeClass('hover'); // remove the hover class when button is clicked
$('.move').toggleClass('angle');
});
});.move {
border:1px solid #000000;
padding: 10px;
transition: transform .2s ease;
/*
have noticed issue is in "transition"
*/
}
.button.hover {
color: red;
}
.angle {
transform: translate(100px, 0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="move">
<button class="button">on click still red?</button>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加