Czy przejście efektu hover z efektem CSS zmienia kolor?

Mam więcej niż 10 przycisków na jednej stronie, więc muszę napisać kod tylko raz, aby zawisnąć. i z tego powodu używam jQuery. Proszę przejść przez mój kod.Czy przejście efektu hover z efektem CSS zmienia kolor?

$(document).ready(function(){ 
 
\t $('.button').hover(function(){ 
 
    \t var bc=$(this).css('background-color'); 
 
     var cl=$(this).css('color'); 
 
    \t $(this).css('background-color',cl); 
 
     $(this).css('color',bc); 
 
      
 
    }); 
 
});

.button { 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 22px; 
 
    height:70px; 
 
    width: 160px; 
 
    margin: 5px; 
 
    transition: all 0.5s; 
 
    margin-right:30px; 
 
} 
 
.button:hover{ 
 
\t transform: scale(1.1); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
</head> 
 
<body> 
 

 
    <button class="button" style="background-color: red;">Hover </button> 
 
    <button class="button" style="background-color: green;">Hover </button> 
 
    <button class="button" style="background-color: blue;">Hover </button> 
 
</body> 
 
</html>

Współpracuje z jednym wskaźnikiem, jeśli ciągle unoszą się na przycisku oznacza, że zmienia kolor, więc jeśli jest jakiś inny sposób na uniknięcie tego ?? Kolor powinien pozostać taki sam.

Źródło

2017-10-06 Nagaraj Pujar

trzeba ustawić kolor tła i czcionki z powrotem do starego stanu na urlopie myszy. Proponuję zapisać te dane css na zdarzeniu "mouseover" i przywrócić stary stan zdarzenia "mouseleave" – toffler

$(document).ready(function(){ 
 
\t $('.button').hover(function(){ 
 
    \t var bc=$(this).css('background-color'); 
 
     var cl=$(this).css('color'); 
 
    \t $(this).css('background-color',cl); 
 
     $(this).css('color',bc); 
 
      
 
    }); 
 
});

.button { 
 
color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 22px; 
 
height:70px; 
 
    width: 160px; 
 
    margin: 5px; 
 
    transition: transform 0.5s; 
 
    margin-right: 30px; 
 
} 
 
.button:hover{ 
 
\t transform: scale(1.1); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
</head> 
 
<body> 
 

 
<button class="button" style="background-color: red;">Hover </button> 
 
<button class="button" style="background-color: green;">Hover </button> 
 
<button class="button" style="background-color: blue;">Hover </button> 
 
</body> 
 
</html>

transition: transform 0.5s; Jak na ten temat?

Źródło

2017-10-06 09:24:16 zynkn

Dodaj id przycisku

<button class="button" style="background-color: red;" id="myId">Hover </button>

Następnie za pomocą jQuery znaleźć przez id

$('#myId').hover(function())

$(document).ready(function(){ 
 
\t $('#myId').hover(function(){ 
 
    \t var bc=$(this).css('background-color'); 
 
     var cl=$(this).css('color'); 
 
    \t $(this).css('background-color',cl); 
 
     $(this).css('color',bc); 
 
      
 
    }); 
 
});

.button { 
 
color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 22px; 
 
height:70px; 
 
    width: 160px; 
 
    margin: 5px; 
 
    transition: all 0.5s; 
 
    margin-right:30px; 
 
} 
 
.button:hover { 
 
\t transform: scale(1.1); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
</head> 
 
<body> 
 

 
<button class="button" style="background-color: red;" id="myId">Hover </button> 
 
<button class="button" style="background-color: green;">Hover </button> 
 
<button class="button" style="background-color: blue;">Hover </button> 
 
</body> 
 
</html>

Źródło

2017-10-06 09:24:45

Zmian all do transform w przycisk klasy css:

$(document).ready(function(){ 
 
\t $('.button').hover(function(){ 
 
    \t var bc=$(this).css('background-color'); 
 
     var cl=$(this).css('color'); 
 
    \t $(this).css({ 
 
     'background-color': cl, 
 
     'color':bc 
 
     }); 
 
      
 
    }); 
 
});

.button { 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 22px; 
 
    height:70px; 
 
    width: 160px; 
 
    margin: 5px; 
 
    transition: transform 0.5s; 
 
    margin-right:30px; 
 
} 
 
.button:hover{ 
 
\t transform: scale(1.1); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
</head> 
 
<body> 
 

 
<button class="button" style="background-color: red;">Hover </button> 
 
<button class="button" style="background-color: green;">Hover </button> 
 
<button class="button" style="background-color: blue;">Hover </button> 
 
</body> 
 
</html>

Źródło

2017-10-06 09:27:55 SilverSurfer

Czy przejście efektu hover z efektem CSS zmienia kolor?

Odpowiedz

Powiązane problemy