工具提示的悬停效果也会在跨度中的内容文本下加下划线

Question

编辑：

我有一个工具提示图标，当你把鼠标悬停在上面时，它会显示一个框，里面有很好的信息。然而，我也希望这能在span标记的内容中给文本加下划线，但我似乎无法同时应用css，我似乎只能让它做其中一个。

以下是工具提示图标的代码：

SCSS

.tooltip-region {
text-align: center;
background-color: blue;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
z-index: 8;
margin-left: 10px;
margin-top: 5px; 
}
.tooltip-region::before {
content: '?';
font-weight: bold;
color: #fff;
}
.tooltip-region:hover p{
display: block;
transform-origin: 100% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.tooltip-region p{
display: none;
text-align: left;
background-color: blue;
padding: 20px;
width: 200px;
position: relative;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #fff;
font-size: 13px;
line-height: 1.4;
font-size: 16px;
font-family: sans-serif;
}
.tooltip-region p::before {
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color: blue;
left:10px;
top:-12px;
} 
.tooltip-region p::after {
width:100%;
height:40px;
content:'';
position: relative;
top:-40px;
left:0; 
}

html

<div class="grid-container">
<form action="#">
<div class="flexrow">
<div class="tooltip-region">
<p>Text</p>
</div>
</div>
</form>
</div>

我想强调的跨度代码是：

html

<div class="grid-item-2">
<pre id="terraCode"> 
region = "<span id="regionList" class="regionListUnderline"></span>"
</pre>
</div>

我有JavaScript代码，可以自动填充跨度的内容，这就是上面的代码中没有文本的原因。

但是当我将鼠标悬停在工具提示上时，我想应用于跨度内容的css是：

SCSS

.regionListUnderline:hover {
border-bottom: 1px dotted black;
}

如果有人能看到我将鼠标悬停在工具提示图标上时如何将虚线应用于跨度的内容，我将不胜感激！

感谢

Answer 1

您可以通过JavaScript更新样式。因此，您必须将其添加到脚本中(确保已加载dom内容)：

const handleMouseOver = () => {
const el = document.getElementById("regionList");
el.style.borderBottom = "1px dotted black";
};
const handleMouseLeave = () => {
const el = document.getElementById("regionList");
el.style.borderBottom = "none";
};
const [tooltip] = document.getElementsByClassName("tooltip-region");
tooltip.addEventListener("mouseover", handleMouseOver);
tooltip.addEventListener("mouseleave", handleMouseLeave);

只有当您有一个类为tooltip-reqion的元素时，这才会起作用，因为代码的目标是第一个出现的元素。如果你有几个，这将需要更多的逻辑。