为什么悬停没有效果？

Question

我尝试了所有方法，但都没有奏效，我也尝试了 jQuery hover() 函数，但也没有用。

html代码：

<div class="current_acticity">
    <div class="img_slides">
        <div id="img_right">
            <img src="./support_files/current_activity/1.jpg"></img>
        </div>
        <div id="img_middle">
            <img src="./support_files/current_activity/2.jpg"></img>
        </div>
        <div id="img_left">
            <img src="./support_files/current_activity/3.jpg"></img>
        </div>
    </div>
</div>

我将img的不透明度设置为0.4，我试图意识到当鼠标悬停在img上时，将其不透明度设置为1。

这是我的 CSS 样式：

.current_acticity{
        width: 100%;
        height: 450px;
    }

.img_slides{
    position: absolute;
    width: 100%;
    height: 450px;
    z-index: -5;
    overflow-x: hidden;
    overflow-y: hidden;
}

.img_slides div{
    position: absolute;
    border: none;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 450px;
    width: 100%;
}

.img_slides img{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    opacity: 0.4;
}

.img_slides img:hover{
    opacity: 1;
}

Answer 1

问题是z-index: -5; 将其设置为正值，悬停将起作用。