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转换 - 问题

回答

相关问题