我创建了一个代码段来演示我遇到的问题,基本上,一旦将鼠标悬停在其中一个框上,跨度标签似乎就会改变
div#mobile--categories__wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
div#mobile--categories__wrapper a.mobile--category__link {
margin: 5px;
text-decoration: none;
width: calc(50% - 10px);
position: relative;
height: 200px;
background: rgba(255, 255, 255, 0.75);
box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, 0.75);
border-radius: 5px;
}
div#mobile--categories__wrapper img.mobile--category__img {
max-width: 200px;
max-height: 200px;
width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
div#mobile--categories__wrapper a.mobile--category__link img.mobile--category__img {
-webkit-filter: blur(1px);
filter: blur(1px);
transition: 0.2s all ease-in;
}
div#mobile--categories__wrapper a.mobile--category__link:hover img.mobile--category__img {
-webkit-filter: blur(0px);
filter: blur(0px);
transition: 0.2s all ease-in;
}
div#mobile--categories__wrapper span.mobile--category__label {
width: 100%;
display: block;
text-align: center;
height: 100%;
line-height: 200px;
z-index: 10;
position: relative;
}
div#mobile--categories__wrapper span.mobile--category__label {
width: 100%;
display: block;
text-align: center;
height: 100%;
line-height: 200px;
z-index: 10;
position: absolute;
}
span.mobile--category__label {
position: relative;
height: 75px !important;
background-color: rgba(0, 0, 0, 0.75);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: 75px !important;
}
<div id="mobile--categories__wrapper">
<a class="mobile--category__link">
<img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
<span class="mobile--category__label">label goes here</span>
</a>
<a class="mobile--category__link">
<img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
<span class="mobile--category__label">label goes here</span>
</a>
<!-- <a class="mobile--category__link">
<img src="" class="mobile--category__img"/>
</a>
<a class="mobile--category__link">
<img src="" class="mobile--category__img"/> -->
</a>
</div>
我需要在标签之前/下方为图像赋予的悬停模糊效果上,使标签的高度停止移动几个像素。是什么原因造成的,我该如何解决?
最佳答案
悬停效果时更改此过渡。设置为
transition: initial;
div#mobile--categories__wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
div#mobile--categories__wrapper a.mobile--category__link {
margin: 5px;
text-decoration: none;
width: calc(50% - 10px);
position: relative;
height: 200px;
background: rgba(255, 255, 255, 0.75);
box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, 0.75);
border-radius: 5px;
}
div#mobile--categories__wrapper img.mobile--category__img {
max-width: 200px;
max-height: 200px;
width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
div#mobile--categories__wrapper a.mobile--category__link img.mobile--category__img {
-webkit-filter: blur(1px);
filter: blur(1px);
transition: initial;
}
div#mobile--categories__wrapper a.mobile--category__link:hover img.mobile--category__img {
-webkit-filter: blur(0px);
filter: blur(0px);
transition: initial;
}
div#mobile--categories__wrapper span.mobile--category__label {
width: 100%;
display: block;
text-align: center;
height: 100%;
line-height: 200px;
z-index: 10;
position: relative;
}
div#mobile--categories__wrapper span.mobile--category__label {
width: 100%;
display: block;
text-align: center;
height: 100%;
line-height: 200px;
z-index: 10;
position: absolute;
}
span.mobile--category__label {
position: relative;
height: 75px !important;
background-color: rgba(0, 0, 0, 0.75);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: 75px !important;
}
<div id="mobile--categories__wrapper">
<a class="mobile--category__link">
<img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
<span class="mobile--category__label">label goes here</span>
</a>
<a class="mobile--category__link">
<img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
<span class="mobile--category__label">label goes here</span>
</a>
<!-- <a class="mobile--category__link">
<img src="" class="mobile--category__img"/>
</a>
<a class="mobile--category__link">
<img src="" class="mobile--category__img"/> -->
</a>
</div>
关于css - CSS模糊会导致跨度上的一些位置/高度偏移而没有过滤器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50939196/