导航的 CSS 过渡悬停按钮答案

【问题标题】：CSS Transition Hover Button For Nav导航的 CSS 过渡悬停按钮
【发布时间】：2016-08-07 03:31:54
【问题描述】：

我正在尝试为我的下拉导航添加过渡延迟。我希望它滞后大约 2 秒，这样它就不会消失得太快。我试过把

transition: 2s ease;

类.dropdown-content

.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 20em;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
transition: 2s ease;
}
.dropdown:hover .dropdown-content {
 display: inline-block;
}

但它没有影响。

总结一下，这里是我使用的所有 HTML 和 CSS：

.dropbtn {
    background-color: @color1;
    color: white;
    padding: 16px;
    font-size: 1.5em;
    border: none;
    cursor: pointer;
    
}

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
    transition: 2s ease;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 20em;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    transition: 2s ease;
}

.dropdown-content a {
    color: @darkColor;
    padding: 12px 16px;
    text-decoration: none;
    display: inline-block;
    
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
    display: inline-block;
    
}

.dropdown:hover .dropbtn {
    background-color: @color2;
}

<header>
    <nav class="dropdown">
        <button class="dropbtn">=</button>
        <div class="dropdown-content">
            <a href="#about">About</a>
            <a href="#food_menu">Menu</a>
            <a href="#map">Map</a>
        </div>
    </nav>
</header>

【问题讨论】：

你是否忘记在标签中添加你的 CSS。
请提供小提琴或密码盘
这里是小提琴的链接，对不起，我对此很陌生，还在学习jsfiddle.net/emily_m_re/tdfpzya1

标签： css drop-down-menu hover css-transitions

【解决方案1】：

$(function() {
  $('.dropdown').hover(
    function() {
     $('.dropdown-content').fadeIn(0);
    },
    function() {
      $('.dropdown-content').fadeOut(2000);
    }
  );
});

.dropbtn {
  background-color: @color1;
  color: white;
  padding: 16px;
  font-size: 1.5em;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
  float: right;
  
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 20em;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: @darkColor;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
/*  display: inline-block; */
}

.dropdown:hover .dropbtn {
  background-color: @color2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
  <nav class="dropdown">
    <button class="dropbtn">=</button>
    <div class="dropdown-content">
      <a href="#about">About</a>
      <a href="#food_menu">Menu</a>
      <a href="#map">Map</a>
    </div>
  </nav>
</header>

您还可以从 jquery 代码更改淡入淡出的时间。我已将其更改为淡入的 0 毫秒和淡出的 2000 毫秒。它们的默认值为 400 毫秒。

【讨论】：

【解决方案2】：

只是“过渡”不适用于所有浏览器。

使用定位所有浏览器

-webkit-transition: 2s ease;
-moz-transition: 2s ease;
-ms-transition: 2s ease;
-o-transition: 2s ease;
transition: 2s ease;

【讨论】：