2

好的，所以我在 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. */
}

提前感谢任何可以帮助我完成我想做的事情的人，真的非常感谢。

4

3 回答 3

1

好的。所以。回答 1。

不要将转换属性放在特定的选择器上，而是尝试制作这样的选择器：

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

然后你可以在你的 html 锚标签中应用 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 或其他内容。

一般来说，我会重新考虑你的选择器。看起来在你的兴奋中，你让事情变得比他们需要的更复杂。

看看这个 jsFiddle。

要为下拉菜单设置动画，您可能需要 java 脚本。我似乎无法在 display:none 上进行转换。但是看看小提琴。我认为它回答了您的问题并显示了上述两种解决方案的示例。祝你好运！

于 2012-12-03T04:55:02.993 回答
0

试试看这里webkit 转换示例。我知道它适用于 webkit，但它可能会有所帮助。

div {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
}

div:hover {
    opacity: 0;
}

我们必须为两个状态设置值，常规和：悬停，以便过渡在两个方向上工作。

于 2012-05-03T13:22:39.263 回答
0

要回答您问题的第二部分，将转换代码放入ul li a而不是:hover状态意味着它将适用于所有状态（:link, :hover, :focus, :active）。

如果要转换子菜单，请尝试将转换代码放在ul li ul {}. 不过，转换display属性不会很好，所以你可能也想尝试opacity（或其他类似的东西height），例如 set ul li ul {opacity: 0;} ul li:hover ul {opacity: 1;}。

于 2012-05-03T13:39:39.473 回答