仅使用CSS，当悬停在另一个div上时显示div

Question

我在网上搜索了一下，但没有找到类似的东西。

假设我们有 div A 和 div B。当鼠标悬停在 div A 上时，div B 应该在 div A 上可见，并且不应该放在下面。

它应该看起来像只有 div A 的内容已经更改为 div B 的内容。

如何使用纯 CSS 和 HTML 实现这一点？

#container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container > div:hover + div {
    display: block

<div id="container">
    <div>A</div>
    <div>B</div>
</div>

- M. El-Set

---

你有任何可以包含在问题中的代码或HTML吗？那总是很有帮助的。 - James Montagne

在纯CSS中，只有当div B是div A的子元素时才可能实现。 - Sven Bieder

@Sven Bieder 这个语句是错误的，它也可能是一个兄弟节点。 - feeela

@feeela 是的，你是对的，我没有考虑过那种可能性。但那只适用于不需要支持旧版浏览器的情况。 - Sven Bieder

Answer 1

这样做可以行得通，但前提是两个div元素相邻且b紧随a之后。

#a:hover + #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="b">Div B</div>

如果你的div之间有其他元素，可以使用 ~ 符号。

#a:hover ~ #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="c">Div C</div>
<div id="b">Div B</div>

很不幸，如果要反过来进行操作，您需要使用Javascript。

// Pure Javascript
document.getElementById('b').onmouseover = function(){
    document.getElementById('a').style.backgroundColor = '#f00';
}
document.getElementById('b').onmouseout = function(){
    document.getElementById('a').style.backgroundColor = '';
}

// jQuery
$('#b').hover(
  function(){$('#a').css('background', '#F00')}, 
  function(){$('#a').css('background', '')}
);

完整的代码：http://jsfiddle.net/p7hLL/5/

- PassKit

---

当鼠标悬停在Div A上时，这会改变Div B的背景颜色。当Div A悬停时，如何使Div B显示在Div A之上？ - M. El-Set

@M.El-Set 仅使用 CSS 是不可能实现这种方式的。 - feeela

我已经添加了如何进行反向操作，但不幸的是，这只能通过Javascript实现。 - PassKit

@M.El-Set - 如果这个答案解决了您的问题，请务必使用答案旁边的复选框将其标记为已解决。这样回答问题的人就会得到认可，其他人也可以轻松地知道它解决了您的问题，并且人们将更倾向于回答您未来的问题。 - Shauna

PassKit 给出了最好的答案，我认为。他说在纯 CSS 中不可能实现。非常感谢。 - M. El-Set

Answer 2

如果您不想使用在某些浏览器上不兼容的选择器+或~，则只有当要显示的<div />（例如div#b）是要悬停的<div />（例如div#a）的子元素时才可能实现。

<div id="a">
    <div id="b"></div>
</div>

<style>
    div#b {
        display: none;
    }

    div#a:hover div#b {
        display: block;
    }
</style>

- algorhythm

---

这是错误的。还有其他可行的解决方案，例如来自@PassKit的一个。 - feeela

@feeela 继续阅读我的句子，我在几分钟前进行了更新。 - algorhythm

“not browser-compatible at all”仍然是错误的。事实上，它不受IE6支持。事实上，一般兄弟选择器被广泛支持，并且没有已知的缺陷。请参考https://developer.mozilla.org/en-US/docs/CSS/Adjacent_sibling_selectors和https://developer.mozilla.org/en-US/docs/CSS/General_sibling_selectors。 - feeela

好的，我已经修改了它。但是还有一些IE浏览器无法使用这行CSS代码。更兼容的方式是使用JavaScript/jQuery实现。 - algorhythm

Answer 3

它可以正常工作，但是你的CSS应该像这样：

<style>
#b{display:none;}
div#a:hover div#b{display:inline}
</style>

- Prakash

Answer 4

它有效; 你可以尝试嵌套的CSS，例如：

HTML

<div class="a">
    <div class="b">
    </div>
</div>

CSS

.a:hover{
  .b{
     /* properties of hover */
   }
}

- Rehan