チェックボックスが選択されていないときにホバーを有効にして (「.add_link_twitter_hover」クラスを追加)、チェックボックスが選択されたら (「.add_link_twitter_hover」クラスを削除して) 無効にしようとしています。ユーザーがピンを追加します。
私はこれを試しましたが、マウスポインターが離れてもホバーを無効にしません (「.add_link_twitter_hover」クラスを削除しません):
var hoverTwitter = "add_link_twitter_hover";
$(postTwitter + " input").click(function(e) {
$(this).parent().removeClass(hoverTwitter);
$(this).parent().toggleClass(activePostTwitter);
});
$("label.add_link_twitter").hover(function(e) {
if($("input.publish_to_twitter").is(":checked")) {
$(this).removeClass(hoverTwitter);
return;
}
$(this).addClass(hoverTwitter);
});
チェックボックスが選択されていないときにホバーを有効にし、チェックボックスが選択されたら無効にする方法はありますか? 前もって感謝します!
jQuery は次のとおりです。
var postTwitter = ".add_link_twitter";
var activePostTwitter = "active";
$(postTwitter + " input").click(function(e) {
$(this).parent().toggleClass(activePostTwitter);
});
html は次のとおりです。
<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>
CSSは次のとおりです。
.add_link_twitter{
position:absolute;
left:15px;
bottom:16px;
color: #a19486;
border: 2px solid transparent;
border-color: #F0EDE8;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
.active {
border-color: #468BD0;
color: #468BD0;
background-color: whiteSmoke;
}
.add_link_twitter_hover
{
color: #A19486;
border: 2px solid transparent;
border-color: #C2B1A2;
border-radius: 4px;
background-color: white;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}