CSS轉換 - 問題

好的，所以我在CSS中獲得轉換以解決我希望他們如何工作的問題有兩個問題，並且我希望有一些具有CSS經驗的人員向我展示如何實現我想實現。CSS轉換 - 問題

我得到的實際初始轉換工作正常，但我在這裏有兩個問題。

首先，我的導航欄的第二個按鈕/鏈接 - 字符 - 有三個子鏈接，當字符按鈕懸停時顯示。我想獲得它，以便這些子鏈接不會顯示，直到發生字符按鈕的實際轉換。我希望你明白我的意思。那麼，這是可能的，如果是這樣，怎麼樣？其次，現在我所有的地方都是按鈕/鏈接翻轉時的轉換，但是當它們被轉出時沒有任何轉換。相反，在推出時它會立即回到默認狀態，而且我感覺真的會破壞過渡效果。所以，我想知道是否有可能以設置懸停出來的過渡，以及在懸停

這裏是我的HTML代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Home</title> 
<link rel="stylesheet" href="complex_1.css"/> 
</head> 

<body> 
    <ul id="navbar"> 
    <li id="home"><a href="#">Home</a></li> 
    <li id="characters"><a href="#">Characters</a> 
     <ul> 
      <li id="subzero"><a href="#">Sub-Zero</a></li> 
      <li id="scorpion"><a href="#">Scorpion</a></li> 
      <li id="kano"><a href="#">Kano</a></li> 
     </ul> 
    </li> 
    <li id="about"><a href="#">About</a></li> 
    <li id="contact"><a href="#">Contact</a></li> 
    </ul> 
</body> 
</html>

而且有問題的CSS代碼它：

ul { /* Sets out the dimensions of the unordered list. */ 
    font-family:Verdana; 
    font-size: 17px; 
    margin: 0px; 
    padding: 0px; 
    list-style:none; 
    position:absolute; 
    letter-spacing:1px; 
} 

ul li { /* All list items of unordered lists. */ 
    display: block; 
    position: relative; 
    text-align:center; 
    float: left; /* Makes the navigation bar horizontal instead of vertical. */ 
} 

li ul { 
    display: none; /* Hides the dropdown menu list items by default. */ 
} 

ul li a { /* All list items of unordered lists that are links. */ 
    color: #ffffff; 
    background: #000000; 
    display:block; 
    text-decoration: none; 
    border-top: 1px solid #ffffff; 
    padding: 7px 40px 7px 40px; 
    margin-left: 0px; 
    white-space: nowrap; 
} 

ul li a:hover { 
    -moz-transition-property:background-color; 
    -moz-transition-duration:400ms; 
    -moz-transition-timing-function:ease-in-out; 
    color:#ffffff; 
    background: #ff0000; 
    } 

li:hover ul { 
    display:block; 
    width:182px; 
} 

li:hover li { 
    display:block; 
    font-size:10px; 
    float:none; 
} 

li:hover a { 
    background: #000000; /* This is where you apply the colour you want for the dropdown list items off the main menu. */ 
} 

li:hover li a:hover { 
    color: #ffffff; 
    background: #ff0000; /* This is where you apply the colour you want for the hover over the list. */ 
}

在此先感謝任何人誰可以幫助我在這裏我想做什麼，它真的非常感激。

來源

2012-05-03 Hashim

還記得我們回答你的問題嗎？ – sheriffderek

哈哈，對不起，在最好的時候我沒有最好的注意力，最重要的是回到大學。 – Hashim

好的。所以。的回答

而不是把過渡性質的具體選擇，嘗試只是讓一個選擇是這樣的：

.trans { 
    -webkit-transition: all 300ms linear; 
    -moz-transition:  all 300ms linear; 
    -ms-transition:  all 300ms linear; 
    transition:   all 300ms linear; 
}

然後你就可以在你的HTML錨標籤應用類=「反式」。

轉換隻發生在「in」而不是「out」的原因是因爲您只將它應用於：hover。您需要將其應用於常規選擇器和：懸停狀態。

以上是乾淨的簡短形式，但有時你會想要不同的過渡時間。

在這種情況下：

.my-thing { 
    -webkit-transition: all 300ms linear; 
    -moz-transition:  all 300ms linear; 
    -ms-transition:  all 300ms linear; 
    transition:   all 300ms linear; 
} 

.my-thing:hover { 
    -webkit-transition: all 600ms linear; 
    -moz-transition:  all 600ms linear; 
    -ms-transition:  all 600ms linear; 
    transition:   all 600ms linear; 
}

回答2.

可以延遲過渡。在你的情況下，從display：none轉換到block。

.delay { 
    transition-delay: 300s; 
    -moz-transition-delay: 300s; 
    -webkit-transition-delay: 300s; 
    -o-transition-delay: 300s; 
}

所以你可以將它應用到子ul或其他東西。

總的來說，我會重新考慮你的選擇器。它看起來像你興奮的事情，你已經使事情變得更復雜，然後他們需要。

退房this jsFiddle。

要爲下拉菜單設置動畫，您可能需要java腳本。我似乎無法獲得顯示的轉變：無法阻止。但看看小提琴。我認爲它回答了你的問題，並展示了上述兩個解決方案的例子。祝你好運！

來源

2012-12-03 04:55:02 sheriffderek

截至2013年10月，我可能會使用sass併爲幾個不同的轉換進行混合，並使用'@ include'或'@ extend'來代替標記中的'.trans'類。 – sheriffderek

試試看看這裏webkit transition example。我知道它適用於webkit，但它可能會有所幫助。當你離開元素時，使用onmouseout屬性。

來源

2012-05-03 13:22:39 ColWhi

爲了回答你問題的第二部分，把過渡代碼到ul li a，而不是:hover狀態意味着它會爲所有國家（:link，:hover，:focus，:active）工作。

如果您想轉換子菜單，請嘗試將轉換代碼放到ul li ul {}。儘管如此，轉換display屬性效果不佳，因此您可能需要嘗試opacity（或其他類似height），例如設置ul li ul {opacity: 0;} ul li:hover ul {opacity: 1;}。

來源

2012-05-03 13:39:39

CSS轉換 - 問題

回答

相關問題