0

チェックボックスが選択されていないときにホバーを有効にして (「.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;
}
4

2 に答える 2

1

これを試して：

$("label.add_link_twitter").hover(function(e) {
    if(!$("input.publish_to_twitter").is(":checked"))
          $(this).addClass(hoverTwitter);
}, function() {
    $(this).removeClass(hoverTwitter);
});

このメソッドを使用する通常の.hover()方法は、 2 つの関数を提供することです。1 つ目はマウスが対象の要素の上に移動したときに呼び出され、2 つ目はマウスが外に移動したときに呼び出されます。

上記で行ったことは、チェックボックスがチェックされていない場合、クラスを追加した最初の関数 (mouseenter) にあります。2 番目の関数 (mouseleave) では、クラスを削除するだけです。

于 2012-08-24T22:10:21.337 に答える
1

これは、JavaScript がまったくなくても実行できます。常に "publish_to_twitter" クラスを持つことが期待される場合は、2 つの状態を疑似クラスで分離するだけです。

.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}

チェックされたスタイルが優先されるように、セレクターに入力要素を追加しました。:hover で設定したすべてのスタイルについて、:checked に同等のスタイルがあることを確認してください。

于 2012-08-24T22:42:08.780 に答える