悬停图像问题

Question

我在此页面上有一个文本链接，https://melodylakerart.com/product/sun-on-skin-mask-duplicate-1/ 将鼠标悬停在该链接上时会弹出一个图像。

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

如何摆脱奇怪的换行符？

CSS 是：

.hover_img a {
  position: relative;
}

.hover_img a span {
  position: absolute;
  display: none;
  z-index: 99;
}

.hover_img a:hover span {
  display: block;
}

.hover_img a:hover span {
  display: block;
  width: 350px;
}

HTML 是：

Sensitive ears? Add an 
<div class="hover_img"> 
   <a href="#">adjustable silicone strap
       <span>
           <img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
       </span>
   </a>
<div>
to take the pressure off

Answer 1

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

将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.

修改CSS：

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;}

Answer 2

你的 HTML 标签组织有一些问题

尝试用此代码替换完整的<div class="hover_img">

<div class="hover_img">
    <p>
        <span>Sensitive ears? Add an </span>
        <a href="#">adjustable silicone strap
            <span>
                <img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
            </span>
        </a>
        <span>to take the pressure off</span>
    </p>
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-22252-0-0">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-22252-0[]"
                data-raw-price="1.50" data-price="1.5" data-price-type="quantity_based"
                value="face-mask-strap-extension-loop-ear-protector"
                data-label="Face Mask Strap Extension Loop Ear Protector"> Face Mask Strap Extension Loop Ear Protector
            (+<span class="woocommerce-Price-amount amount"><span
                    class="woocommerce-Price-currencySymbol">£</span>1.50</span>)</label>
    </p>
    <div class="clear"></div>
</div>