ボタンがアクティブなときにシャドウを削除します。

JavaScriptが付いたボタンがあります。ボタンをクリックすると、隠しボックスが表示されます。別のボックスをクリックすると、最初のボックスが2番目のボックスに置き換えられます。私のボタンがアクティブなとき、ボックスが見えるとき、それは周囲に影をつけます。そして私はそれを望んでいない！私は次のCSSコードを使用しようとしました：ボタンがアクティブなときにシャドウを削除します。

.nav > button{ 
    width: auto; 
    font-family: 'OpenSansBold'; 
    color: #000; 
    padding: 3px; 
    border: none; 
    margin-right: 10px; 
    margin-top: 5px; 
    font-size: 15px; 
    text-align: left; 
    background-color: #fff; 
} 

button:hover{ 
    cursor: pointer; 
    border: none; 
    color: #7b1a2c; 
} 
button:visited{ 
    font-family: 'OpenSansBold'; 
    box-shadow: none; 
} 

button:active{ 
    box-shadow: none; 
}

運がありません。ボタンがアクティブなときに別のCSSコードがありますか？

私はjavascriptについての手掛かりはありません。コピーしてコピーするだけです。多分、これはjsコードで修正できるものですか？念のため、私は君たちを表示することができます。

$('div.box').slice(1).addClass('hidden'); 

$('.nav').children('button').on('click', function(){ 
    // console.log('klikk'); 
    $(this).data('content'); 

    $('.box').not('hidden').addClass('hidden'); 
    $($(this).data('content')).removeClass('hidden'); 
});

出典

2016-05-19 Mira Stenvik Granly

jsfiddleを提供したり、あなたが – user2517200

はたぶん、あなたはおよそoutlineプロパティまたは:focus疑似クラスの話しますか？

この方法を試してください。

button:active, button:focus { 
    box-shadow: none; 
    outline: 0; 
}

出典

2016-05-19 10:50:58 oboshto

思考、素晴らしいキャッチすることを与えたことはありません助けるためにcodepenてください！私はあまりにも** ** ** ** ** ** **の代わりにでした。 – Randy

ありがとうございました！出来た！前に焦点コードについて聞いたことはありません。優れた！ –

があなたに作業例を挙げれば、次のスニペットで遊んで、私はあなたがそれをしたいと思うように、これは動作しますだと思います。

シャドウを完全に削除するには、2番目のJSルールを削除します。

// :active rules 
 
$('button').on('mousedown', function() { 
 
    $(this).css('box-shadow', 'none'); 
 
}); 
 

 
// :visited rules 
 
$('button').on('mouseup', function() { 
 
    $(this).css('box-shadow', '10px 10px 5px #888888'); 
 
});

button { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    box-shadow: 10px 10px 5px #888888; 
 
}

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 

 
<body> 
 
    <button>test</button> 
 
</body>

出典

2016-05-19 10:52:31 Randy

ボタンがアクティブなときにシャドウを削除します。

答えて

関連する問題