css - 我想在工具提示悬停时更改标题背景颜色

Question

我想在悬停时更改背景颜色标题，而不是在悬停时更改标题。 问题是当我悬停元素时，标题仍然是浅灰色(我认为是默认值颜色)。我想把背景改成黑色

<a class="popover-title" data-toggle="tooltip" data-trigger="hover"
                    title="test" 
             popover-append-to-body="true">

这种风格

 .myStyle{
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: black;
    border-radius: 0.25rem;
  }

已解决

我找到了解决方案

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
[data-title]:after {
 content: attr(data-title);
 max-width: 200px;
 background-color: #000;
 color: #fff;
 position: absolute;
 text-align: center;
 padding:  0.25rem 0.5rem;
 border-radius: 0.25rem;
 font-style: normal;
 font-weight: 400;
 line-height: 1.5;
 z-index: 99999;
 visibility: hidden;
}
[data-title] {
  position: relative;
}

但问题是当我想翻译时它不起作用并且工具提示返回透明

<a class="font-weight-bold font-xs btn-block text-muted" data-toggle="tooltip" data-placement="bottom"
                [attr.data-title]="'test' | translate" 
          popover-append-to-body="true">

Answer 1

您可以为此使用传统的 CSS。

.popover-title:hover {
    background-color: black;
}