好的，所以我在 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. */
}
提前感谢任何可以帮助我完成我想在这里做的事情的人，真的非常感谢。
最佳答案
好的。所以。 答案 1.
与其将过渡属性放在特定的选择器上，不如尝试像这样制作一个选择器:
.trans {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
然后您可以在您的 html anchor 标记中应用 class="trans"。
过渡只发生在“in”而不是“out”的原因是因为你只将它应用于 :hover。您需要将它应用于常规选择器和 :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;
}
所以你可以将它应用到 sub ul 或其他东西。
一般来说，我会重新考虑您的选择器。看起来你兴奋得让事情变得比它们需要的更复杂。
查看 this jsFiddle .
要使下拉菜单具有动画效果，您可能需要 java 脚本。我似乎无法在 display:none 上进行转换。但是看看 fiddle 。我认为它回答了您的问题并显示了上述两种解决方案的示例。祝你好运!
关于CSS 过渡 - 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10431946/