Question

如果您运行代码段并将鼠标悬停在＆＃34;将鼠标悬停在此处＆＃34;，您将看到一张脾气暴躁的猫的图片，但图片会反复闪烁：

你可能不得不将光标移开到它所说的位置＆＃34;将鼠标悬停在这里＆＃34;并将其悬停在第二次。

＆＃13;

$('[data-toggle="popover"]').popover(
  {
    trigger:'hover'
    ,html:true
  }
)

＆＃13;

<div data-toggle="popover" data-content='<img src="https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">'>Hover here</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

＆＃13;

Answer 1

我想说它与<div>的宽度和高度有关，正如你所看到的那样，它具有固定尺寸，就像魅力一样。

$('[data-toggle="popover"]').popover(
  {
    trigger:'hover'
    ,html:true
  }
)

<div style="width:50px; heigth:50px;" data-toggle="popover" data-content='<img src="https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">'>Hover here</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Answer 2

你观察这个的原因是因为jquery添加了一个带有绝对位置的类popover的自动div。这会导致它位于左上边缘，因此会导致鼠标悬停在我的文本上。

我建议通过event.relatedTarget修改行为（如果event.relatedTarget是带有.popover类的div，那么不要在你的hover me文本上激活mouseout，但我想你不能在jquery中修改它） ..为了证明我的意思，这是一个小提琴：

https://jsfiddle.net/ibowankenobi/o4s5Lvz7/1/

div.popover {
  display:block;
  position:relative !important;
  top:200px !important;
}

样式是由jquery添加的popover div中的内联，所以我必须使用！important来覆盖它。

在悬停闪烁上弹出一个图像

2 个答案: