magento 为什么网站导航崩溃得这么快？

sirbozc5 于 2022-11-12 发布在其他

关注(0)|答案(3)|浏览(169)

当你看这个网站的菜单时：https://www.eurotuin.be/
当你试着把它悬停在空中时，它会很快崩溃。
我尝试过以下代码，但似乎不起作用：

.main-nav__link {
    transition:all 0s ease 0s!important;
}

这一条也有同样的效果：

.main-nav__link {
    transition:all 3s ease 3s!important;
}

magento

来源：https://stackoverflow.com/questions/72110695/why-is-the-site-navigation-collapsing-so-fast

3条答案

按热度按时间

kyxcudwk1#

您当前使用的是“display”，它不能转换。
你应该使用一些可以转换的东西，比如“不透明度”和“可见性”的结合。
下面的代码应该可以达到预期的效果。

.main-nav__flyout {
  display: block !important;
}

.main-nav__item .main-nav__flyout {
  transition: all 0.5s ease 0.2s!important;
  opacity: 0;
  visibility: hidden;
}

.main-nav__item:hover .main-nav__flyout {
  opacity: 1;
  visibility: visible;
}

赞(0）回复(0）举报 2022-11-12

pbpqsu0x2#

两件事：

如果持续时间是0秒，过渡会有什么影响（我不是Maven，这是一个真正的问题）？加上过渡是应用在你的链接上，它不会对你的菜单有任何影响（这是一个不同的元素）。
所以这里的问题是：通过将display属性从none更改为block来显示/隐藏菜单。

更准确地说，.hide（）和.show（）应用于mouseout和mouseover事件的菜单元素（来自li元素）。因此，一旦鼠标进入或退出li元素，菜单就“隐藏”和“显示”。
还要注意，显示属性不能设置动画或过渡。

赞(0）回复(0）举报 2022-11-12

xqnpmsa83#

这是最好的解决办法作为一个新鲜

<html>
            <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
            .dropbtn {
              background-color: #04AA6D;
              color: white;
              padding: 16px;
              font-size: 16px;
              border: none;
            }

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

            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f1f1f1;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }

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

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

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

            .dropdown:hover .dropbtn {background-color: #3e8e41;}
            </style>
            </head>
            <body>

            <h2>Hoverable Dropdown</h2>
            <p>Move the mouse over the button to open the dropdown menu.</p>

            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>

            </body>
            </html>

赞(0）回复(0）举报 2022-11-12

我来回答

magento 为什么网站导航崩溃得这么快？

3条答案

相关问题

热门标签

最新问答