代码之家 › 专栏 › 技术社区 › potato

CSS区分悬停在元素上和它的::before伪元素

pseudo-element hover css html

potato · 技术社区 · 6 年前

attr() 要实现自定义工具提示,但是当我将鼠标从元素移到工具提示本身上时,工具提示不会消失,有没有方法不使用包含工具提示文本的子元素来修复它?

[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  text-align: center;
  white-space: nowrap;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 0.5em;
  line-height: 1.2em;
  max-height: 1.2em;
}

[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 8px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

<br><br><br><br>
<center>
    <span data-tooltip="tooltip text"> visible text </span>
</center>

2 回复 | 直到 6 年前

imste 6 年前

试用 pointer-events:none 在工具提示上,它将显示工具提示,但它将被光标忽略

[data-tooltip]:hover::before {
    content: "";
    pointer-events: none;
    position: absolute;
    bottom: calc(100% - 8px);
    left: calc(50% - 8px);
    border-width: 8px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

推荐文章

Sahil Singh · 使用css在导航栏中定位时出现问题

2 年前

Mike C. · css伪下箭头:未在所有标签上显示后

7 年前

Rusletov · 使元素与浮动元素的边界相邻

7 年前

Hatem · SASS-将更改器应用于::当:悬停后

7 年前

Hacker · 在文本输入中放置美元符号

7 年前

o.danielcoker · CSS-定位伪元素

7 年前

titlu · :选中的伪类选择器在CSS上不工作

7 年前

user7262544 · 如何将变量添加到伪类的jquery选择器?

7 年前

Chris · 伪元素:after正在添加before

8 年前

Russel Riehle · 如何基于父项的右边缘打开超出的子菜单区域?

8 年前