时间戳

首页 > 解决方案 > HTML - 第二个 IMG 悬停问题

javascript - HTML - 第二个 IMG 悬停问题

问题描述

我有 2 个半圆彼此相邻，形成一个圆圈。当我将鼠标悬停在左侧半圆上时，右侧会降低它的不透明度（这是应该做的），但是当我将鼠标悬停在右侧半圆上时，不透明度根本不会改变。

HTML：

<div id="animation-components">
    <img src="leftball.svg" alt="" class="animation-item-01">
    <img src="rightball.svg" alt="" class="animation-item-02">
</div>

CSS：

#animation-components {}

    .animation-item-01 {
        display: inline;
        position: relative;
        margin-bottom: 240px;
        margin-top: 100px;
        transform: translate(631px,80px);
        height: 320px;
        transition: opacity ease 0.5s;
    }

    .animation-item-02 {
        display: inline;
        position: relative;
        margin-bottom: 240px;
        margin-top: 100px;
        transform: translate(627px,80px);
        height: 320px;
        transition: opacity ease 0.5s;
    }

    .animation-item-01:hover + .animation-item-02{
        opacity: 50%;
    }

    .animation-item-02:hover + .animation-item-01{
        opacity: 50%;
    }

我可以改变什么来完成这项工作？

标签： javascripthtmlcss

解决方案

问题是您只能选择具有相邻兄弟选择器的下一个兄弟。

.element-1 + .element-2 /* good */
.element-2 + .element-1 /* not so good */

既然.animation-item-02来了 .animation-item-01，就没有办法选择上.animation-item-01一个.animation-item-02

执行以下操作将解决此问题：

#animation-components:hover > div {
    opacity: 50%;
}
#animation-components > div:hover {
    opacity: 100%;
}

推荐阅读