如果将鼠标悬停在任一 div 上，则使两个相邻 div 的翻转一起

【问题标题】：Making two adjacent div's rollover together if you hover over either div如果将鼠标悬停在任一 div 上，则使两个相邻 div 的翻转一起
【发布时间】：2011-09-24 18:30:00
【问题描述】：

我创建了一个 DIV，里面有两个 DIV；带有翻转图像的 DIV 和下方带有文本和正常翻转行为的 DIV。

它们的文字描述了图像，并且它们都是指向同一个地方的链接，所以我希望它们在鼠标悬停在其中任何一个上时一起滚动。

谁能告诉我如何仅使用 CSS 来做到这一点？

非常感谢！

【问题讨论】：

标签： css image text hover rollover

【解决方案1】：

您可以将:hover 放在外部<div> 上，然后使用它来影响内部<div>s 上的翻转。例如：

<div class="outer">
    <div class="inner-img">
    </div>
    <div class="inner-text">
        Where is pancakes house?
    </div>
</div>

还有一些 CSS：

.outer {
    width: 200px;
    border: 1px solid #000;
}
.inner-img {
    width: 200px;
    height: 100px;
    background-image: url(http://placekitten.com/200/100);
}
.inner-text {
    width: 200px;
}
.outer:hover .inner-img {
    background-image: url(http://placekitten.com/201/100);
}
.outer:hover .inner-text {
    background-color: #dfd;
}

还有一个例子：http://jsfiddle.net/ambiguous/3bXhA/

【讨论】：

谢谢穆！您的回答使我走上了正轨，我非常感谢您的帮助！！！