时间戳

首页 > 解决方案 > CSS：悬停效果必须用“点击”初始化

html - CSS：悬停效果必须用“点击”初始化

问题描述

我已经阅读了这个问题的答案：CSS Hover effect only on click。我有一个 bootstrap4dropdown-menu并且我hover effect在它上面添加了一个来显示dropdown-items。

.my-menu ul li {
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 12px;
    display: inline;
}

.my-menu ul li a {
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 12px;
}

.dropdown-menu {
    border-style: none!important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)!important;
}

.my-menu ul li:hover .dropdown-menu {
    display: block!important;
}
<div class="my-menu">
<ul>
<li>
    <a href="" class="pr-2 dropdown-toggle" data-toggle='dropdown' aria-haspopup="true" aria-expanded="false">Account <i class="fas fa-user-circle"></i></a>
    <div class="dropdown-menu">
         <a class="dropdown-item" href="{% url 'accounts:register' %}">Register</a>
         <a class="dropdown-item" href="{% url 'accounts:login' %}">Login</a>
    </div>
</li>
</ul>
</div>

悬停效果有效，但它需要click初始化，我不知道为什么会这样做。

Bootstrap4 下拉菜单无法在悬停效果下正常工作，或者我做错了什么。dropdown-menu我想到的第一个解决方案是从头开始构建自己的解决方案。但我想来这里看看能不能快速解决。

标签： htmlcssbootstrap-4

解决方案

你需要给li元素一个position: relative属性。

.my-menu ul li {
    position: relative;
}

推荐阅读