html - 设置 div 悬停动作以不移动其他元素
问题描述
我在屏幕上有一个包含 100 个项目的列表,并且一些描述比 div 的宽度长,所以我正在剪切它的其余部分以使它们都保持相同的大小。在悬停时,我想显示所有数据。我设法做到了,但是现在当我将鼠标悬停在一个项目上时,下面的所有项目都在向下移动。我想将悬停的 div 向前移动并将所有其他图块保持在同一位置。
<div class="album-item">
<div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
<div class="album-card">
<div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
<div class="artist">Original Television Cast of Rent Live</div>
<div class="date">February 1, 2019</div>
</div>
</div>
<div class="album-item">
<div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
<div class="album-card">
<div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
<div class="artist">Original Television Cast of Rent Live</div>
<div class="date">February 1, 2019</div>
</div>
</div>
.album-item {
background-color: gray;
width: 170px;
margin: 25px;
}
img {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
opacity: 0.8;
border: 1px solid transparent;
&:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 1;
border-color: yellow;
cursor: pointer;
}
}
.album-card {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: yellow;
white-space: normal;
height: 100%;
}
.name {
font-size: 110%;
font-weight: 550;
}
.artist {
font-weight: 300;
}
.date {
font-weight: 100;
font-style: italic;
font-size: 80%;
}
}
我希望图像描述显示在下方图像的顶部,因此它不会移动整个列表。
解决方案
不复制内容:https ://codepen.io/dmegatool/pen/jdmOgq
这就是你要找的效果吗?
新的CSS:
.album-item {
width: 170px;
margin: 25px;
margin-bottom:75px;
}
img {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
opacity: 0.8;
border: 1px solid transparent;
&:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 1;
border-color: yellow;
cursor: pointer;
}
}
.album-card {
display:block;
position:absolute;
width:170px;
background-color: gray;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: yellow;
white-space: normal;
height: auto;
z-index:10;
}
.name {
font-size: 110%;
font-weight: 550;
}
.artist {
font-weight: 300;
}
.date {
font-weight: 100;
font-style: italic;
font-size: 80%;
}
}
原封不动的 HTML:
<div class="album-item">
<div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
<div class="album-card">
<div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
<div class="artist">Original Television Cast of Rent Live</div>
<div class="date">February 1, 2019</div>
</div>
</div>
<div class="album-item">
<div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
<div class="album-card">
<div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
<div class="artist">Original Television Cast of Rent Live</div>
<div class="date">February 1, 2019</div>
</div>
</div>
推荐阅读
- ruby-on-rails - 我无法在 rails 6.0.3 中使用 gem 'ar-octopus'
- applescript - 如何使用 AppleScript 在邮件应用程序中选择来自发件人的邮件?
- r - fread:na.strings 中的空字符串 ("") 不会被解释为 NA
- python - Python循环函数仅在Dataframe中的行中满足条件时提取第一列名称
- opengl - 使用 Alpha 混合进行深度测试
- laravel - 在每个刀片中包含导航栏和页脚的正确方法 - Laravel 7?
- angular - 向生产模式添加新更改后清除 Angular 缓存
- kubernetes - 如何在使用 PVC 时管理 pod 副本
- javascript - 在 Firebase 数据库引用后 Node.js 控制台挂起
- audio - 如何在 spi 闪存中写入音频文件(W25Q32FV)