鼠标悬停显示额外内容
创建一个卡片,在鼠标悬停时显示额外内容。
- 在卡片上使用
overflow: hidden
来隐藏垂直溢出的元素。 - 使用
:hover
和:focus-within
伪类选择器来改变卡片的样式,如果元素被悬停、聚焦或其任何后代被聚焦。 - 设置
transition: 0.3s ease all
来在悬停/聚焦时创建过渡效果。
<div class="card">
<img src="https://picsum.photos/id/404/367/267"/>
<h3>Lorem ipsum</h3>
<div class="focus-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> <a href="#">Link to source</a>
</p>
</div>
</div>
.card {
width: 300px;
height: 280px;
padding: 0;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
}
.card * {
transition: 0.3s ease all;
}
.card img {
margin: 0;
width: 300px;
height: 224px;
object-fit: cover;
display: block;
}
.card h3 {
margin: 0;
padding: 12px 12px 48px;
line-height: 32px;
font-weight: 500;
font-size: 20px;
}
.card .focus-content {
display: block;
padding: 8px 12px;
}
.card p {
margin: 0;
line-height: 1.5;
}
.card:hover img, .card:focus-within img { margin-top: -80px; }
.card:hover h3, .card:focus-within h3 { padding: 8px 12px 0; } ```
当鼠标悬停在.card
元素上或者.card
元素内部有焦点时,图片的上边距会减少80像素。
当鼠标悬停在.card
元素上或者.card
元素内部有焦点时,标题的内边距会变为8像素的上内边距,12像素的左右内边距,0像素的下内边距。