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

Question

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

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

JSFiddle example

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根据您自己的。