Question

我想从包含hide类的div中删除类popover，并在每个链接上悬停并显示我的popover，但我的代码无效。

＆＃13;

$(document).ready(function() {
  $(".myPopover").each(function() {
    var doc = $(this);
    doc.mouseover(function() {
      doc.find('.popover').removeClass('hide').addClass('show');
    });
  });
});

＆＃13;

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover.hide {
  opacity: 0;
}

.popover.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="myPopover">help</a>
<div class="popover hide">
    <h4>title</h4>
    <p>content</p>
</div>

<a href="#" class="myPopover">help2</a>
<div class="popover hide">
    <h4>title2</h4>
    <p>content2</p>
</div>

＆＃13;

Answer 1

我已经编写了一个非JS解决方案，如果有人禁用了JS，那么你应该只在HTML＆amp; CSS无法真正做到某些事情，只需使用 JUST HTML＆amp; CSS。

body {
  background: white;
}

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover {
  opacity: 0;
}

.myPopover:hover ~ .popover {
  opacity: 1 !important;
}

<div>
  <a href="#" class="myPopover">help</a>
  <div class="popover hide">
    <h4>title</h4>
    <p>
      content
    </p>
  </div>
</div>

<div>
  <a href="#" class="myPopover">help2</a>
  <div class="popover">
    <h4>title2</h4>
    <p>
      content2
    </p>
  </div>
</div>

Answer 2

而不是使用＆＃34; myPopover＆＃34;来循环遍历所有元素。 class尝试同时将事件处理程序绑定到所有这些：

$(document).ready(function() {

  $(".myPopover").hover(
    function() {
      $( this ).next('.popover').removeClass('hide').addClass('show');
    }, function() {
      $( this ).next('.popover').removeClass('show').addClass('hide');
    }
  );

});

此外，根据您使用的jquery版本，您可以使用jquery提供的内置$('.popover').hide()和$('.popover').show()

＆＃13;

$(document).ready(function() {
    
    
      $(".myPopover").hover(
        function() {
  $(this).next('.popover').removeClass('hide').addClass('show');
        }, function() {
 $(this).next('.popover').removeClass('show').addClass('hide');
        }
      );
    
});

＆＃13;

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover.hide {
  opacity: 0;
}

.popover.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#" class="myPopover">help</a>
<div class="popover hide">
  <h4>title</h4>
  <p>
    content
  </p>
</div>
<a href="#" class="myPopover">help2</a>
<div class="popover hide">
  <h4>title2</h4>
  <p>
    content2
  </p>
</div>

＆＃13;

Answer 3

使用此：

doc.next('.popover').removeClass('hide').addClass('show');

find - 在其中找到元素，但在锚标记旁边有.popover。

无论如何，由于您使用鼠标悬停删除“隐藏”类并添加“显示”，您的弹出窗口将打开不关闭，您可以通过使用悬停功能进出来显示和隐藏弹出窗口，或者有一个关闭按钮来关闭弹出窗口。

谢谢，希望这有帮助！

Answer 4

您希望在链接悬停时从链接后面的div中删除“隐藏”类。这是怎么回事

$(".myPopover").hover(function(){ //when you hover on any link  with class myPopover this goes off
    var div = $(this).next(".popover"); //gets the next sibling element if it has the class popover
    $(div).removeClass("hide").addClass("show");
});

Answer 5

您可以使用de function on执行不同的方法：

$( document ).on('mouseover', '.myPopover', function(e){ $( this ).next('.popover').removeClass ('hide'); });

此外，您可以为您的元素设置ID，然后您可以轻松找到它所处的位置。

如何在每个链接上使用悬停删除类隐藏

5 个答案: