html - 限制相对 div 中的链接宽度
问题描述
下面的代码在将鼠标悬停在链接上时显示了一个工具提示。出于某种原因,我无法限制 div 内链接的宽度,因此悬停效果发生在沿父 div 宽度的任何点,这不是我想要的。我希望悬停效果仅限于链接文本的宽度。
.show {
position: relative;
}
.show a {
max-width: 20%;
}
.show .tooltip {
/*visiblity: hidden; */
display: none;
position: absolute;
top: 0;
left:5%;
margin-top: -30px; /* approx adjustment for arrow */
margin-left: 25px; /* approx adjustment for arrow */
}
.show a:hover + .tooltip,
.show a:focus + .tooltip {
cursor: pointer;
display: block;
/*visibility: visible; */
width: 75%;
line-height: 20px;
padding: 8px;
font-size: 14px;
text-align: center;
z-index: 999;
color: rgb(113, 157, 171);
background: rgb(255, 255, 255);
border: 4px solid rgb(255, 255, 255);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
box-shadow: #333 -4px 4px 16px 2px;
-webkit-transition: opacity 100ms ease-in;
-o-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.show .tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 22px;
left: -23px;
}
a {
max-width: 20%;
max-width: 20vw;
}
<div class="lev2">
<div class="show">
<a href="javascript:void(0)"><h3>Link</h3></a>
<div class="tooltip">
<h2>h2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
编辑:将a
orh3
元素切换为内联块会更改 div 的尺寸,从而提供不需要的边距和/或填充。将所有涉及的元素的边距/填充设置为 0 并不能解决此问题。
解决方案
推荐阅读
- javascript - 如何使此弹出代码弹出 50% 一个站点和 50% 另一个站点?
- android - Android ABI 拆分迁移到 App Bundle
- php - 使用工厂确保单个实例行为
- java - 是否可以使用两个版本的 SLF4J?
- java - 如何解决 H2“执行 DDL 时出错”错误?
- sql - 数百万不同类型值的高效存储模式
- angular - 如何使用 Sqlite3 从 Angular/Spring Boot 存储图像
- c++ - 从 std::stringstream 读取 uint8_t 作为数字类型
- reactjs - React Intl-无法读取未定义的属性“formatMessage”
- r - 词法错误:UTF8 字符串中的无效字节