有沒有辦法減慢懸停效果？

有沒有辦法減緩懸停效果？我的網站上有一個懸停效果（移除），可以在圖像上懸停顯示文字。我想稍微放慢一點。圖片切換的速度有點震驚。有沒有辦法減慢懸停效果？

我該怎麼做？

2012-06-22 S. Fellig

是您使用jQuery的選項嗎？ –

http://cherne.net/brian/resources/jquery.hoverIntent.html –

您可以添加CSS3過渡：

-webkit-transition: all 500ms ease; 
-moz-transition: all 500ms ease; 
-ms-transition: all 500ms ease; 
-o-transition: all 500ms ease; 
transition: all 500ms ease;

來源

2012-06-22 21:54:41 eivers88

它是否適用於'*：hover'？ – xameeramir

這取決於你如何顯示文本。如果您要更改CSS屬性，則可以使用CSS3 transitions來完成此操作。下面是一個例子。

HTML：

<div id="A"></div><div id="B"></div>

CSS：

div { 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 

    -moz-transition: opacity 4s; /* Firefox */ 
    -webkit-transition: opacity 4s; /* Safari and Chrome */ 
    -o-transition: opacity 4s; /* Opera */ 
    transition: opacity 4s; 
} 
#A { 
    background: red; 
    opacity: 1; 
    z-index: 1; 
} 
#B { 
    background: blue; 
    opacity: 0; 
    z-index: 2; 
} 
#B:hover { 
    opacity: 1; 
}

Demo

編輯：大衛·托馬斯告訴我，你不能瓚轉換顯示。我已經更新了上面的使用不透明度。

來源

2012-06-22 21:55:03 Zhihao

你不能在'display'狀態之間'轉換';當然不在'display：block'和'display：none'之間。內容只是跳躍，然後，也許是動畫。 –

@DavidThomas，謝謝你的提升。我不知道。也許它可以用不透明度來完成？我編輯了我的答案以反映這一點。 – Zhihao

是的，你可以轉換不透明度。我發現這裏有更好的選擇。 – BoltClock

如果你願意，你可以使用jQuery .fadeIn（）http://api.jquery.com/fadeIn/

.fadeIn（[時間] [回調]）
時間字符串或者數字決定多久動畫將運行。
回調函數在動畫完成後調用。

來源

2012-06-22 22:36:18 Andrey

我知道這有點晚，但看看CSS3動畫。我在我的一個Garry's Mod加載屏幕上使用動畫。

/* Styles go here */ 
 

 
button { 
 
    margin-left: 50%; 
 
    margin-right: 50%; 
 
} 
 
button:hover { 
 
    -webkit-animation: breathing 5s ease-out infinite normal; 
 
    animation: breathing 5s ease-out infinite normal; 
 
} 
 
@-webkit-keyframes breathing { 
 
    0% { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    25% { 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    50% { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    75% { 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
} 
 
@keyframes breathing { 
 
    0% { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    25% { 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    50% { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    75% { 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <p>Below I have a button that changes size on mouse hover useing CSS3</p> 
 
    <button>Hover over me!</button> 
 
</body> 
 

 
</html>

我知道這是不太你要找的結果，但我敢肯定，你和其他人可以發現這很有用。

來源

2015-06-26 16:53:56

有沒有辦法減慢懸停效果？

回答

相關問題