Question

CSS不适用于span标签悬停，这是在Internet Explorer中的按钮标记内，我有按钮，如果你将鼠标悬停在它上面它将显示工具提示，我想如果你悬停工具提示它应该消失，它正在工作FF和Chrome但不是IE，我知道我应该使用

.tooltip：hover .tooltiptext

而不是

.tooltiptext：悬停

＆＃13;

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltiptext:hover {
    display: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<body style="text-align:center;">

<div class="tooltip">
  <button type="button">Hover me
  <span class="tooltiptext">Tooltip text</span>
  </button>
</div>
</body>
</html>

＆＃13;

有什么建议，我也可以使用jquery。感谢。

Answer 1

据我所知，你在做什么是错的：

“tooltiptext”是“工具提示”的子元素......

..所以当你徘徊“tooltiptext”时，你也在徘徊“工具提示”。事实上，它也不适用于Chrome。它只是闪烁。

当您将“工具提示”悬停时，您应该只显示“tooltiptext”，并在离开时隐藏它。

删除此：

/*
.tooltiptext:hover {
    display: none;
}
*/

甚至更容易使用title属性：

<button type="button" title="Tooltip text">Hover me</button>

Answer 2

好吧，让我习惯了jQuery如何在JSFiddle中工作，但是如果你愿意使用jQuery，那么这个应该工作。

＆＃13;

$('.tooltip').mouseover(function() {
  $('.tooltiptext').css('visibility', 'visible');
});

$('.tooltip').mouseout(function() {
  $('.tooltiptext').css('visibility', 'hidden');
});

＆＃13;

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}


/* .tooltip:hover .tooltiptext {
    visibility: visible;
} */


/* .tooltiptext:hover {
    display: none;
} */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body style="text-align:center;">

  <div class="tooltip">
    <button type="button">Hover me
  <span class="tooltiptext">Tooltip text</span>
  </button>
  </div>
</body>

＆＃13;

请注意，我已注释掉CSS的部分以调整工具提示文字的可见性。使用此方法，您可以安全地删除它。还要注意我的jQuery实现有点乱，因为我忽略了将悬停效果放在函数中。这个片段只是试图显示答案。祝你好运。

：将鼠标悬停在按钮上，不在IE中工作

2 个答案: