Question

我正在尝试为我的下拉导航添加转换延迟。我希望它滞后约2秒，所以它不会太快消失。我试过把

.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;
}

课程.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>

但它没有任何影响。

总结一下，以下是我正在使用的所有HTML和CSS：

{{1}}

{{1}}

Answer 1

只是＆＃34;过渡＆＃34;并不适用于所有浏览器。

使用

定位所有浏览器

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

Answer 2

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

你也可以改变fadein＆amp;的时间。来自jquery代码的淡出。我已将其更改为0ms用于fadeIn和2000ms用于fadeOut。它们的默认值是400毫秒。

导航的CSS过渡悬停按钮

2 个答案: