css:当另一个div悬停时显示div

Question

我有2个div.Div A和​​Div B.如果Div A徘徊,那么我需要显示Div B.这只能用纯css实现吗？或者,如果我在查询中执行此操作,我如何在假设我们不能对这两个div使用id的情况下使用此基础.

谢谢

Answer 1

假设两个divs包含在div:

http://jsfiddle.net/4p8CM/1/

#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>

这些:first-child东西是为了解决你设置的这个限制:

基于我们不能对这两个div使用id的假设

如果您希望第二个div在将鼠标悬停在其上时保持可见,请尝试以下操作:

http://jsfiddle.net/4p8CM/3/

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

Answer 2

请注意,我id在这些示例中使用了元素来识别使用哪些特定元素.代替ids你可以使用几乎任何其他CSS选择器,重要的是所选元素之间的关系; 在第一个例子中,我使用了相邻兄弟选择器,后者则使用了后代选择器.

如果您发布标记,并通过评论通知我,我会尝试修改选择器以匹配您正在使用的内容.否则这只是一个通用的最佳猜测.他们并不总是那么有用......

也就是说,答案如下:

如果你有超级简单的标记,那么这可以通过CSS完成:

#divB {
    display: none;
}

#divA:hover + #divB {
    display:  block;
}

<div id="divA">
    Some content in 'divA'
</div>
<div id="divB">
    Some content in 'divB'
</div>

JS小提琴演示.要么:

#divB {
    display: none;
}

#divA:hover #divB {
    display:  block;
}

<div id="divA">
    Some content in 'divA'
    <div id="divB">
        Some content in 'divB'
    </div>
</div>

JS小提琴演示.