Entfernen Schatten von einer Schaltfläche, wenn es aktiv ist

Ich habe eine Schaltfläche mit Javascript angehängt. Wenn Sie auf die Schaltfläche klicken, wird eine ausgeblendete Box angezeigt. Wenn Sie auf eine andere klicken, wird die erste Box durch die zweite und so weiter ersetzt. Wenn meine Schaltfläche aktiv ist, wird die Box sichtbar, wenn sie sichtbar ist. Und das will ich nicht! Ich habe versucht, die folgenden css-Codes zu verwenden:Entfernen Schatten von einer Schaltfläche, wenn es aktiv ist

.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; 
}

Aber ohne Glück. Gibt es einen anderen CSS-Code für Schaltflächen, wenn er aktiv ist?

Ich habe keine Ahnung von Javascript, kopieren Sie einfach eingefügt diese Sache. Vielleicht ist das etwas, das im js-Code behoben werden kann? Nur für den Fall, kann ich euch zeigen:

$('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'); 
});

Quelle

2016-05-19 Mira Stenvik Granly

bitte einen jsfiddle oder codepen bieten Ihnen – user2517200

Vielleicht sprechen Sie outline Eigenschaft oder :focus Pseudo-Klasse?

Versuchen Sie dieses:

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

Quelle

2016-05-19 10:50:58 oboshto

nie gab, dass ein Gedanke, großer Fang zu helfen! Ich war zu viel auf ** x ** statt ** y **. – Randy

Vielen Dank! Es funktionierte! Habe noch nie von dem Fokuscode gehört. Ausgezeichnet! –

Sie ein funktionierendes Beispiel zu geben, mit dem folgenden Ausschnitt spielen, um, ich denke, das verhält sich wie Sie es wollen.

Um den Schatten vollständig zu entfernen, entfernen Sie einfach die zweite JS-Regel.

// :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>

Quelle

2016-05-19 10:52:31 Randy

Entfernen Schatten von einer Schaltfläche, wenn es aktiv ist

Antwort

Verwandte Themen