在仅使用css悬停另一个div时显示div [英] Show div when hover another div using only css

问题描述

我已经在网上搜索了这个，但没有找到类似的东西。

I have searched the web for this one but didn't find anything similar.

说我们有div A和​​div B.当悬停在div A，div b应该可见ON（应该看起来像覆盖）div A而不放置在下。

Say we have div A and div B. When hover on div A, div b should be visible ON (should look like overwriting) div A and not placed under.

它应该只显示div A的内容已更改为div B的内容。

It should appear like only the content of div A has changed to content of div B.

如何这在纯CSS和HTML中完成？

How can this be done in pure CSS and 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>

推荐答案

em>如果两个div是相邻的，并且b跟在a之后。

This will work, but only if the two divs are adjacent and b follows a.

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

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

如果您使用之间有div

If you have divs in between use ~

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

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

不幸的是，你需要Javascript

To go the other way around, unfortunately you will need 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/

这篇关于在仅使用css悬停另一个div时显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！