CSS懸停效果轉換是否改變顏色？

我在一個頁面上有超過10個按鈕，所以我只需要爲懸停只寫一次代碼。正因爲如此，我正在使用jQuery。請通過我的代碼。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); 
 
     $(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>

它正常工作與一個懸停，如果我們在一個按鈕可以連續懸停意味着它改變了顏色，所以如果有任何其他的方式來避免這種情況？顏色應該保持不變。

來源

2017-10-06 Nagaraj Pujar

您需要設置背景顏色和字體顏色回當鼠標離開老態。我建議將這些CSS數據保存在'mouseover'事件上，並在'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;這個怎麼樣？

來源

2017-10-06 09:24:16 zynkn

添加id到按鈕

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

然後使用jQuery找到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>

來源

2017-10-06 09:24:45

變化all到transform在你的按鈕類的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>

來源

2017-10-06 09:27:55 SilverSurfer

CSS懸停效果轉換是否改變顏色？

回答

相關問題