Question

我想知道为什么我的悬停效果不起作用。现在我有一个图像，当我将光标移到它上面时，我想要这样的东西。

当然我已经编写了这个效果的代码，但它对悬停效果不起作用。你能解释一下我做得不好吗？就像你可以看到我尝试过display：none然后显示：block但没有任何事情发生。我真的很感激你的帮助。

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;
        }
    }
}

Answer 1

您想要的是p元素在您悬停display: blocked元素（即它的父元素）后将获得.products__box：

.products__box p{
  display: none;
}
.products__box:hover p{
  display: block;
}

检查此更新：
https://jsfiddle.net/dnttrb7q/1/

Answer 2

您需要在图像上使用悬停并使用加号（+）选择器

显示段落

它应该是这样的：

p{
   display:none;
}

因为p在img之后：

img:hover + p {
   display:block;
}

Answer 3

您将悬停效果放在display: none的p标记上。如果显示为none，则元素不会占用页面上的空间，因此您实际上并没有将鼠标悬停在页面上。我可以想出两种方法来解决这个问题。

首先，您可以尝试visibility: hidden元素不可见，但它仍然在页面上。或者你可以将悬停效果放在外面的div上。但是你必须找到子标记来改变它的显示。

悬停对图像的影响

3 个答案: