Question

我在div中有两个元素，一个淡入的图像和一些改变颜色的文本，但我无法让它们同时转换。换句话说，鼠标只能是一个或另一个。

我尝试将属性放在包含它们的div中，但这没有帮助。

HTML ：

<div id="selectors">
    <div id="omselector">
        <a href="stills.html">
        <img class="noglow" src="images/stills/oldcog.png" alt="Old Work!">
        <img class="glow" src="images/stills/oldcogglow.png" alt="Old Work">
        <p class="button">OLD WORK</p>
        </a>
    </div>
</div>

CSS ：

.button
{
    float: bottom;
    width: 350px;
    font-size: 20pt;
    text-align: center;
    font-weight: 900;
    color: #FFFFFF;
    left: 0;
    top: 200px;
    -webkit-transition: color 1s;
    -moz-transition: color 1s;
    -o-transition: color 1s;
    transition: color 1s;
    z-index: 6:
}

.button:hover
{
    color: #0df400;
}

#omselector
{
    position: absolute;
    height: auto;
    width: 300px;
    top: 40%;
    left: 25%;
    z-index: 7;
}

.glow, .noglow
{
    width: 250px;
    height: 250px;
    position: absolute;
    left: 70px;
}

Answer 1

要同时更改鼠标事件上两个元素的样式，您可以利用父元素的鼠标事件，并在选择器中使用#omselector及其:hover伪类。

例如：

#omselector:hover .button {/*...*/}
#omselector:hover .glow, .noglow {/*...*/}

根据您自己的情况查看JSFiddle demo。

Answer 2

Try this fiddle

需要注意的一点是，尝试将图像和文本放在#omselector内，以便它们都接收悬停事件。（请注意，这不适用于你从左侧悬停。

如何让两个兄弟元素同时过渡？

2 个答案: