J'utilise JQuery pour changer le style CSS onmouseover, mais j'ai du mal à réinitialiser au passage du CSS que j'ai changé onmouseover. Ce que je voudrais faire est:onmouseout réinitialiser CSS avec JQuery
Le style original: - Images de BTN2 et btn3: gris
onmouseover "btn1": - Arrière-plan de "btn1", "BTN2" et le changement "de btn3" à rouge - Images de "BTN2" et "btn3": couleur
onMouseOut: le style original
onmouseover "BTN2": - Arrière-plan de "btn1" et le changement "de BTN2" au rouge - image "btn2": couleur
OnMouseOut: style original
onmouseover "btn3": - Arrière-plan de "btn1" et le changement "de btn3" au rouge - Image de "btn3": couleur
OnMouseOut: le style original
$(function() {
$('#btn1').hover(function() {
$('#btn2, #btn3').css('background-color', 'red');
$('#btn2, #btn3').css('color', 'white');
$('#btn2, #btn3').css('filter', 'grayscale(0%)');
$('#btn2, #btn3').css('-webkit-filter', 'grayscale(0%)');
$('#btn2, #btn3').css('filter', 'none');
}, function() {
// on mouseout, reset the background colour
$('#btn2, #btn3').css('background-color', '');
$('#btn2, #btn3').css('color', '#b2b2b2');
$('#btn2, #btn3').css('filter', 'grayscale(100%)');
$('#btn2, #btn3').css('-webkit-filter', 'grayscale(100%)');
$('#btn2, #btn3').css('filter', 'gray'); \t
$('#btn2, #btn3').css('-webkit-transition', 'all .2s ease');
});
});
$(function() {
$('#btn2, #btn3').hover(function() {
$('#btn1').css('background-color', 'red');
$('#btn1').css('color', 'white');
}, function() {
// on mouseout, reset the background colour
$('#btn1').css('background-color', '');
$('#btn1').css('color', '#b2b2b2');
});
});
.btn {
background: #b2b2b2;
height: 90px;
width: 90px;
padding: 0;
font-weight: normal;
font-size: 10px;
text-align: center;
vertical-align: middle;
color: gray;
cursor: pointer;
position:relative;
vertical-align: middle;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
-webkit-transition: all .2s ease;
margin: 0;
}
.btn:hover {
\t background: red;
\t color: white;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}
.btn1 {
padding: 0.5em 1.0em;
background: none;
border: none;
color: #b2b2b2;
font-family: sans-serif;
font-size: 14px;
cursor: pointer;
margin: 0 auto;
}
.btn1:hover {
color: white;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" class="btn1">social media</button>
<button id="btn2" class="btn"><img src="https://images.vexels.com/media/users/3/137253/isolated/preview/90dd9f12fdd1eefb8c8976903944c026--cone-do--cone-do-facebook-by-vexels.png" width="80%"/></button>
<button id="btn3" class="btn"><img src="https://images.vexels.com/media/users/3/137419/isolated/preview/b1a3fab214230557053ed1c4bf17b46c-logotipo-do--cone-do-twitter-by-vexels.png" width="80%"/></button>
Pourquoi ne pas simplement ajouter et supprimer des classes? – epascarello