javascript - 悬停后如何显示div元素并保持可见？

Question

如果我将鼠标悬停在“strong”标签上，是否可以隐藏 div 元素并显示它们？现在，我在 fieldset 中有大约 50 个 div，过滤器太长了。我想在悬停后显示 div 并保留它。可能吗？

我没有更改代码的权限(我只能使用我可以添加到 或 的 JS 和样式。

谢谢:-)

<div class="param-filter-single">
   <form method="post">
      <fieldset class="parametric-filter">
         <strong>CATEGORY</strong>
         <br>
         <div class="param-filter-single-cell large-3 medium-4 small-6">content</div>
         <div class="param-filter-single-cell large-3 medium-4 small-6">content</div>
         <div class="param-filter-single-cell large-3 medium-4 small-6">content</div>
      </fieldset>
   </form>
</div>

Answer 1

您可以直接定位您的 strong 元素，并使用它在悬停时显示和隐藏您的 div。最好向 strong 元素添加一个类，但如果不能，您可以这样做:

https://jsfiddle.net/27bu03x5/15/

HTML

<div class="param-filter-single">
   <form method="post">
      <fieldset class="parametric-filter">
         <strong>CATEGORY</strong>
         <br>
         <div class="param-filter-single-cell large-3 medium-4 small-6">content</div>
         <div class="param-filter-single-cell large-3 medium-4 small-6">content</div>
         <div class="param-filter-single-cell large-3 medium-4 small-6">content</div>
      </fieldset>
   </form>
</div>

JQUERY

var container = $(".parametric-filter").first();
var divs = container.find($(".param-filter-single-cell"));
var trigger = $("strong").first();

divs.hide();
trigger.hover(function(){
    divs.show();
});