在标签内的div上悬停过渡[重复]

Posted 2023-03-05

【中文标题】在标签内的div上悬停过渡[重复]

【英文标题】：hover transition on div within an a tag [duplicate]

【发布时间】：2018-11-07 11:36:24

【问题描述】：

所以我有一个如下所示的导航：

  <nav>
    <ul>
      <li>
        <a href="#">About</a>
        <div style="background-color: #c03546;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Companies</a>
        <div style="background-color: #f26d5b;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Brands</a>
        <div style="background-color: #f6ea8c;height: 10px;"></div>
      </li>
    </ul>
  </nav

我只需要通过 css 应用一种样式，当我将鼠标悬停在它对应的 div 上时会出现（这些 div 最初不显示）加上 - 我需要它们逐渐出现，所以我需要有一个过渡持续时间。

到目前为止，我设法让 div 在将鼠标悬停在标签上时出现，但我无法添加过渡持续时间，因为它似乎不起作用

  nav 
    position: fixed;
    background-color: #fafafa;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #cacaca;
  

  nav li 
    display: inline-block;
    padding: 0 1em;
  

  nav li a 
    color: #939393;
    font-weight: 400;
    transition-duration: 3s;
  

  nav li div
    display: none;
    transition-duration: 3s;
  

  nav li a:hover +div
    display: block;
  

【参考方案1】：

display 属性不能被动画化。

但您可以改用 opacity 属性：

nav 
  position: fixed;
  background-color: #fafafa;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #cacaca;


nav li 
  display: inline-block;
  padding: 0 1em;


nav li a 
  color: #939393;
  font-weight: 400;
  transition-duration: 3s;


nav li div
  opacity: 0;
  transition-duration: 3s;


nav li a:hover +div
  opacity: 1;

 <nav>
    <ul>
      <li>
        <a href="#">About</a>
        <div style="background-color: #c03546;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Companies</a>
        <div style="background-color: #f26d5b;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Brands</a>
        <div style="background-color: #f6ea8c;height: 10px;"></div>
      </li>
    </ul>
</nav>

【讨论】：

太棒了！我还能通过动画应用什么？

w3.org/TR/css-transitions-1/#animatable-css