Html 悬停图像问题

我在这个页面上有一个文本链接，当鼠标悬停在上面时会产生一个弹出图像

如您所见，文本已断开-所有介于“敏感”和“关闭”之间的文本应位于一行（包括链接）

我怎样才能摆脱奇怪的断线

CSS是：

。悬停\u img a{
位置：相对位置；
}
.悬停一段距离{
位置：绝对位置；
显示：无；
z指数：99；
}
.悬停\图像a：悬停范围{
显示：块；
}
.悬停\图像a：悬停范围{
显示：块；
宽度：350px；
}

HTML是：

敏感的耳朵？添加 减轻压力

---

您的HTML标记组织存在一些问题

尝试用此代码替换完整的

敏感的耳朵？添加
减轻压力


面罩带延伸环耳罩
(+£1.50)

插件对内部div做了一些奇怪的事情。它将内容包装在一个p标记中，并将div推到外部。最好在不需要时将其删除，并将类名移动到a标记（除了）。。。。。将a更改为span，因为这样您就不会有可单击的行为

将html更改为：

Sensitive ears? Add an <span class="hover_img">adjustable silicone ear protector strap <span><img src="https://melodylakerart.com/wp-content/uploads/2020/06/Mask-extenders-2.jpg" alt="image" height="100"></span></span>to take the pressure off.

---

谢谢，但我不能编辑附加组件相关的代码-这是一个woocommerce插件。我只是将代码添加到插件中的描述字段中：好，在本例中，将其添加到css文件中：。hover_img p br{display:none；}

span.hover_img { position:relative; color:#f66f61; }
span.hover_img span { position:absolute; display:none; z-index:99; }
span.hover_img:hover span {display: block;width: 350px;}