html - 下一列不需要的悬停效果
问题描述
将鼠标放在第三列lorem ipsum
,您会hover
在下一列看到不需要的效果。
如何避免这种情况?
.footer{
column-count:2;
background:#006790;
padding:9px 14px;
}
.link{
display:block;
padding:4px 10px;
margin:7px 3px;
color:white;
white-space:nowrap;
font-size:1.1em;
border-radius:9px;
}
.link:hover{
background:white;
color:black;
}
<div class = 'footer'>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
</div>
解决方案
删除所有padding
并margin
从中link
添加line-height
。那会解决你的问题。以下是相同的片段
.footer {
column-count: 2;
background: #006790;
padding: 9px 14px;
}
a.link {
display: block;
line-height: 30px;
color: white;
white-space: nowrap;
font-size: 1.1em;
border-radius: 9px;
text-align: center
}
a.link:hover {
background: white;
color: black;
}
<div class='footer'>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
</div>
推荐阅读
- c# - 使游戏对象不可见而不使其处于非活动状态
- javascript - 提交前检查 JavaScript / 拒绝访问全局变量
- c# - CMake Dlibdotnet.native 构建错误
- java - 无法从java读取属性文件
- javascript - 在Javascript中反转字符串?
- flutter - 作为变量的颤动按钮与非变量不同
- java - 将名称包更改为以前的版本
- javascript - 使用 Chart.js 从外部 JSON 文件解析值
- reactjs - 在重复单击另一个组件reactjs中的相同选项卡时重新渲染组件
- android - DateUtils.getRelativeTimeSpanString() 在 Android 5 上因 NullPointerException 而失败