Question

我试图使用CSS＆＃34; hover＆＃34;在图像上显示div。事件。但它根本不起作用。一切都没有发生......你能检查一下发生了什么吗？谢谢。

.over {

        display: none;
        opacity: 0.6;
        background: #F58634;
        font-family: Montserrat;
        color: white;
        padding: 20px;
        width: 171px;
        height: 114px;
        z-index: 2;

    }

    .over:hover {

        display: block;

    }

    .img {

        z-index: 1;

    }

这是HTML ...

<td width="171px" >
                <img class="img" src="./img/cat/_MG_7415.JPG" alt="" width="171px" height="114px">

                <div class="over">
                    <table>
                        <tr>
                            <td>PESO</td>
                            <td>0,500gr</td>
                        </tr>
                        <tr>
                            <td>VALIDADE</td>
                            <td>60 DIAS<br><span style="font-size:5px;">APÓS DATA DE FABRICAÇÃO</span></td>
                        </tr>
                        <tr>
                            <td>CAIXA</td>
                            <td>5kg</td>
                        </tr>
                        <tr>
                            <td>TEMPERATURA</td>
                            <td>0 a 5ºC</td>
                        </tr>
                    </table>
                </div>

            </td>

所以，我想要div类＆＃34; .over＆＃34;覆盖＆＃34; .img＆＃34;显示鼠标在图像上的一些信息。我有什么遗失的吗？

谢谢！

Answer 1

＆＃13;

.over {
        display:none;
        opacity: 0.6;
        background: #F58634;
        font-family: Montserrat;
        color: white;
        padding: 20px;
        width: 171px;
        height: 114px;
        z-index: 2;
    }
    img.img:hover + .over {
        display:block;
    }

＆＃13;

<td width="171px" >
                <img class="img" src="./img/cat/_MG_7415.JPG" alt="" width="171px" height="114px">

                <div class="over">
                    <table>
                        <tr>
                            <td>PESO</td>
                            <td>0,500gr</td>
                        </tr>
                        <tr>
                            <td>VALIDADE</td>
                            <td>60 DIAS<br><span style="font-size:5px;">APÓS DATA DE FABRICAÇÃO</span></td>
                        </tr>
                        <tr>
                            <td>CAIXA</td>
                            <td>5kg</td>
                        </tr>
                        <tr>
                            <td>TEMPERATURA</td>
                            <td>0 a 5ºC</td>
                        </tr>
                    </table>
                </div>

            </td>

＆＃13;

CSS解决方案：使用+选择器选择next元素。

.over {
    display:none;
    opacity: 0.6;
    background: #F58634;
    font-family: Montserrat;
    color: white;
    padding: 20px;
    width: 171px;
    height: 114px;
    z-index: 2;
}
img.img:hover + .over {
    display:block;
}

Answer 2

以下是jQuery

的解决方案

<script>
    $(function() {
        $('img.img').hover(function() {
            $('div.over').show();
        }, function() {
            $('div.over').hide();
        });
    );
</script>

在这种情况下，您将不再需要这个：

.over:hover {

    display: block;

}

Answer 3

div显示：none，因此没有显示，因此无法将鼠标悬停在它上面。

尝试将其更改为显示：阻止而改变悬停中的不透明度。

正如Jacob Gray在您对帖子的评论中所提到的，您可以使用可见性。因此，您可以设置一次，然后将初始可见性设置为隐藏，然后在悬停期间设置为可见，而不是更改悬停中的不透明度。

Answer 4

https://jsfiddle.net/ahmadasjad/52mmdxyb/

尊敬的，您已在.over上定义了悬停事件，但它已被隐藏。如果它不可用，我们如何鼠标悬停在该元素上！你需要的是将鼠标悬停在图像上，然后在div中显示内容。我做了相应的事。请检查jsfiddle.

移除：

.over:hover {

        display: block;

    }

并将其更改为

.img:hover +  .over {
        display: block;
    }

表示：如果鼠标悬停在图片上，请显示div内容为over的内容

悬停事件CSS根本不起作用

4 个答案: