html - 悬停图像问题
问题描述
我在此页面上有一个文本链接,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
解决方案
您对 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>
推荐阅读
- shell - 使用 awk 执行操作后替换列
- java - 我在这段代码中得到 java.util.IllegalFormatConversionException。我正在尝试在java中使用日期类来打印日期
- c# - 检查字符串是否仅包含某个单词?
- python - 如何串联替换列表中的元素
- ruby-on-rails - Ruby on Rails - 如何使用 simple_form grouped_select 获得自定义输出?
- javascript - 从对象数组中提取一些属性
- azure - 使用从身份服务器接收的访问令牌的断言流从 azure AD 创建访问令牌
- c# - PostBack 和 HttpWebResponse 如何解决这个问题?
- angular - 如何在 VPS 中托管 Angular CLI?
- php - 无法将 laravel 数组传递给视图