当前位置：文江博客话题详情

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

发布于 2024-11-17 18:10:54 字数 165 浏览 3 评论 0原文

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

它们的文字描述了图像，并且它们都是指向同一位置的链接，因此我希望当鼠标悬停在任一图像上时它们都一起滚动。

谁能告诉我如何只用 CSS 做到这一点？

非常感谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦途 2024-11-24 18:10:54

您可以将 :hover 放在外部

上，然后使用它来影响内部

上的翻转。例如：

<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/ambigously/3bXhA/

You could put the :hover on the outer <div> and then use that to effect the rollovers on the inner <div>s. For example:

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

And some 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;
}

And an example: http://jsfiddle.net/ambiguous/3bXhA/

回复收藏 0 原文

~没有更多了~