2016年1月12日

cssのhoverを無効にする


一例としてチェックボタンをチェックしないと有効にならないボタンを作ります。


ここに貼っても動かないと思いますが、下のようなものです。






チェックボックスとボタンを配置し、チェックしないとボタンが機能しないようにします。

<html>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
    $(function() {
    $('.btn').attr('disabled', 'disabled');
    $('#check').click(function() {
        if ($(this).prop('checked') == false) {
            $('.btn').attr('disabled', 'disabled');
        } else {
            $('.btn').removeAttr('disabled');
        }
    });
        $('.btn').click(function() {
        　　alert("test");
        });
    });
</script>
<style>
    .btn{
       display: block;
       border: 1px solid #06c;
       color: #fff;
       background: #17c;
       background-color: #17c;
       }
   .btn:hover { background-color: #06c;}
</style>
<input type="checkbox" id="check"><label for="check">同意</label></p>
<input type="button" class="btn" value="実行">
</html>

これで動き自体は問題ないのですが、ボタン無効時にもhoverで色が変わるので無効になっていることがわかりません。

$('.btn').unbind('hover');
とすればよさそうなのですがNGです。 

$(".btn").unbind("mouseenter").unbind("mouseleave"); 
とすればOKとも聞きましたが、うまくいきませんでした。

 .btn:disabled { background-color: #17c;}
をcssに加える（上記だと</style>直前に追加）とうまくいきました。

disabled擬似クラスをhover擬似クラスより後方に追加するのがポイントのようです。disabled擬似クラスというものは知らなかったのですが、css3で追加されたセレクタで、要素が操作不可状態となっている場合に対象となる擬似クラスセレクタということです。
時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)