我想知道为什么我的悬停效果不起作用。 现在我有一个图像,当我将光标移到它上面时,我想要这样的图像。悬停对图像的影响
当然我写这个效应的代码,但它不会在悬停效果的工作。 你能解释我做得怎么样? 就像你可以看到我已经尝试与显示:无,然后显示:块,但没有发生。 我会很感激的帮助。
这里有一个jsfiddle demo和codepen demo
HTML代码
<section class="products">
<h1 class="products__title"><span>Wspierane</span> produkty</h1>
<div class="products__wrap">
<div class="products__box">
<img src="http://i.imgur.com/Zrd6Mgu.png" alt="">
<p>hera</p>
</div>
<div class="products__box">
<img src="http://i.imgur.com/Zrd6Mgu.png" alt="">
<p>elektra</p>
</div>
<div class="products__box">
<img src="http://i.imgur.com/Zrd6Mgu.png" alt="">
<p>rainbow</p>
</div>
<div class="products__box">
<img src="http://i.imgur.com/Zrd6Mgu.png" alt="">
<p>roboclean</p>
</div>
<div class="products__box">
<img src="http://i.imgur.com/Zrd6Mgu.png" alt="">
<p>rainbow d4</p>
</div>
</div>
</section>
SCSS代码
$font: 'Lato', sans-serif;
$break-medium: 45em;
$break-large: 75em;
@function calculateRem($size) {
$remSize: $size/16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
* {
margin: 0;
padding: 0;
}
.products {
width: 100%;
height: 1600px;
background-color: rgb(255,255,255);
@media only screen and (min-width: $break-large) {
height: 500px;
}
&__title {
margin: 0;
font-family: $font;
@include font-size(35px);
font-weight: 700;
text-align: center;
color: rgb(13,13,13);
padding-top: 35px;
padding-bottom: 45px;
@media only screen and (min-width: $break-medium) {
@include font-size(50px);
}
span {
font-weight: 900;
}
}
&__wrap {
@media only screen and (min-width: $break-large) {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
}
&__box {
width: 240px;
background-color: rgb(255,255,255);
margin: 0 auto;
position: relative;
margin-top: 30px;
}
p {
font-family: $font;
font-weight: 700;
@include font-size(30px);
text-transform: uppercase;
color: rgb(247,248,249);
text-align: center;
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@media only screen and (min-width: $break-large) {
display: none;
&:hover {
display: block;
}
}
&::before {
content: '';
background-color: rgb(10,198,162);
width: 240px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -200;
}
}
}