Question

是否可以将div元素隐藏并显示，如果我将鼠标悬停在“ strong”标签上？现在，我在字段集中大约有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();
});

Answer 2

纯js并支持多个组：

fiddle

var tohide = document.getElementsByClassName('param-filter-single-cell');
for(var i =0 ; i< tohide.length; i++){
     tohide[i].style.display = 'none';
 }
 var handles = document.getElementsByTagName('strong');

 for(var i = 0 ; i< handles.length; i++){
      handles[i].onmouseover = function(e){
      var toshow = e.currentTarget.parentElement.getElementsByClassName('param-filter-single-cell');
      for(var i =0 ; i< toshow.length; i++){
      toshow[i].style.display = 'block';
 }};}

Answer 3

$(".parametric-filter").mouseover(function(){
    $('.param-filter-single-cell').slideDown();
});

.param-filter-single-cell { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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的解决方案：

$("strong").mouseover(function(){
    $('.param-filter-single-cell').show();
});

或使用幻灯片：

$("strong").mouseover(function(){
    $('.param-filter-single-cell').slideDown();
});

Javascript：

strongEl = document.getElementsByTagName("strong")[0];
childElements = document.getElementsByClassName("param-filter-single-cell");
strongEl.addEventListener("mouseover", function(){
    childElements.style.display = "block"
});

Answer 4

.param-filter-single-cell{
  display:none;
}

.parametric-filter:hover .param-filter-single-cell{
  display:block
}

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

喜欢吗？

悬停后如何显示div元素并使它们可见？

4 个答案: