CSS 中的悬停和 JavaScript 中的可见性不兼容吗？

Question

所以，我有一个图标。当我将鼠标悬停在图标上时，如果我将鼠标悬停在图标上，则会显示工具提示。

HTMl是：

     <i class="fa fa-info-circle infoIcon">
       <span class="tooltip">
         <span class="tooltipClose">x</span><br>
         <p>some text</p>
      </span>

而 CSS 是

   .infoIcon:hover {
     .tooltip {
        visibility: visible;
        opacity: 1;
     }
   }

现在，如果我将鼠标悬停在标有 class“infoIcon”的图标上，将显示工具提示。如果我将鼠标悬停在图标外，工具提示就会消失。但是，工具提示上有一个关闭按钮，标签为 class、“tooltip”。如果我点击它，工具提示需要消失。

为此，我使用了 jQuery:

    $(".tooltipClose").click(function (e) {
        $(this).closest(".tooltip").css("visibility", "hidden");
      });

如果单击关闭按钮，工具提示将消失。但是问题是，如果我再次将鼠标悬停在图标上，工具提示将不会再次显示。我知道这是因为我将工具提示的可见性设置为隐藏在 jQuery 中。我该如何解决这个问题，以便在单击按钮并将鼠标悬停在图标外时关闭工具提示？

Answer 1

您可以侦听 mouseleave 事件并将 css 设置回空，因为内联样式将优先于样式表，因此您需要设置属性回到它应该的样子：

$(".tooltipClose").click(function (e) {
    $(this).closest(".tooltip").css("visibility", "hidden");
    $(this).closest(".tooltip").one("mouseleave", function() {
        $(this).css("visibility", "");
    });
});

Answer 2

如果 tooltip 是 bootstrap 一个，JQuery 应该支持工具提示功能，因此要关闭其中一个，您应该执行以下操作：

$(this).closest(".tooltip").tooltip("hide");

Answer 3

您正在使用的 jquery 方法 .css() 将样式应用于标记本身作为属性。因此 attribute/inline 样式首先优先考虑外部/内部样式表中的悬停样式。

所以你应该做的是切换工具提示的 class 或属性。

Tooltip -> meant for show on hover and hide on mouseleave.
Popover -> meant for staying and act on close button click.

但是如果您想要 close button 单击作为选项，那么 mouseleave 不是最佳解决方案。

$(".tooltip").parent().on('mouseover', function() {
  $(".tooltip").hide();
  $(this).find('.tooltip').show();
})
$(".tooltip").find('.tooltipClose').on('click', function() {
  $(this).parent().hide();
})

.infoIcon, .text {
  position: relative;
  margin-top: 50px;
  border: 1px solid red;
}
.tooltip {
  position: absolute;
  top: -10px;
  display: none;
  background: #22222240;
  width: 200px;
}
.tooltipClose {
  display: inline-block;
  width: 100%;
  text-align: right;
  cursor: pointer;
  margin-right: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="fa fa-info-circle infoIcon">
   <span class="tooltip">
      <span class="tooltipClose">x</span><br>
      <p>some text</p>
   </span>
</i>
<div class="text">
  Another Text (i)
  <span class="tooltip">
     <span class="tooltipClose">x</span><br>
  <p>some tooltip</p>
  </span>
</div>

CSS 中的悬停和 JavaScript 中的可见性不兼容吗？

Are hover in CSS and visibility in JavaScript not compatible?

javascript

css

jquery

less