延遲：懸停使用CSS？

我有一個菜單，其中onhover apears信息框，告訴按鈕做什麼。我如何應用延遲，以便在我將鼠標放在按鈕上之後，盒子的apears讓我們說一秒鐘？延遲：懸停使用CSS？

HTML：

<td class="info"><a id="login-edit_account" href="../login-edit_account.php">Edit account<span><div id="pointer"></div><p style="font-size:11px">Edit user's information.</p></span></a></td>

CSS：

td.info      { 
          position:relative; /*this is the key*/ 
          z-index:24; background-color:#ccc; 
          color:#000; 
          text-decoration:none 
          } 

td.info:hover    { 
          z-index:25; 
          background-color:#fff 
          } 

td.info span    { 
          display: none; 
          transition: 0s display; 
          } 

td.info:hover span   { /*the span will display just on :hover state*/ 
          display:block; 
          position:absolute; 
          top:42px; left:7px; 
          width:210px; 
          border:2px solid #0cf; 
          padding: 5px; 
          background-color:#fff; color:#000; 
          text-align: center; 
          -webkit-transition-delay:5s; 
          } 

#pointer     { 
          border:solid 10px transparent; 
          border-bottom-color:#0cf; 
          position:absolute; 
          margin:-27px 0px 0px 10px; 
          }

來源

2013-03-24 AlesSvetina

是的，你可以使用CSS3的transitions推遲:hover效果。

CSS轉換是CSS3規範集的一部分，提供了一種在更改CSS屬性時控制動畫速度的方法。而不是讓屬性更改立即生效，您可以導致屬性的更改發生一段時間。例如，如果將元素的顏色從白色更改爲黑色，則通常該更改是即時的。啓用CSS轉換後，變化會按照加速度曲線的時間間隔發生，所有這些都可以自定義。

在你的情況下，我相信你需要專注於transition-delay屬性。

下面是關於一些有用的鏈接，使用轉換/例如用例：

https://developer.mozilla.org/en-US/docs/CSS/transition-delay

http://css-tricks.com/transition-delay-delays/

http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/

來源

2013-03-24 17:47:54 lifetimes

謝謝你的回答......我發現這個解決辦法，但你使用的瀏覽器也不會做任何事情 – AlesSvetina 2013-03-24 17:58:18

@AlesSvetina？你有沒有試過看我鏈接的例子？它應該工作.. – lifetimes 2013-03-24 17:58:38

我正在使用Chrome。我嘗試在IE瀏覽器，它也不起作用 – AlesSvetina 2013-03-24 18:01:03

這真的很簡單。例如：

a { 
    -webkit-transition: 1s 3s; 
} 

a:hover { 
    background-color: red; 
}

當用戶懸停鏈接時，瀏覽器等待3秒鐘。只有當這些秒數過去後，背景纔會轉變爲紅色（在這種情況下，轉換時間爲1秒）。

這裏有一個小提琴：http://jsfiddle.net/joplomacedo/VP7hE/

來源

2013-03-24 19:08:08 banzomaikaka

延遲：懸停使用CSS？

回答

相關問題