Question

我已阅读以下问题的答案：CSS Hover effect only on click。我有一个bootstrap4 dropdown-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 Dropdowns不能正常工作并具有悬停效果，或者我做错了什么。我想到的第一个解决方案是从头开始构建自己的dropdown-menu。但是我想来这里看看是否可以快速解决。

Answer 1

您需要为select subject_name, topic_name, problem_type, count(*) as num_problems, average , stddev( pa.duration ), sum(case when pa_duration < average then 1 else 0 end) as num_less_than_average from (select tm.subject_name, tm.topic_name, pm.problem_type, avg( pa.duration ) over (partition by tm.subject_name, tm.topic_name, pm.problem_type) as average from problem_attempt pa join problem_master pm on pa.problem_id = pm.id topic_master tm on pm.topic_id = tm.id where pa.outcome = 'Solved' and pa.duration > 10 and pa.duration < 1000 and pm.problem_type = 'SCA' ) x group by subject_name, topic_name, problem_type, average ;元素提供一个li属性。

position: relative

CSS：悬停效果必须使用“点击”进行初始化

1 个答案: