20

私はこれをウェブで検索しましたが、似たようなものは見つかりませんでした。

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

3 に答える 3

30

これは機能しますが、2 つの 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/

于 2013-01-17T15:19:14.013 に答える
15

セレクターを使用したくない場合、+または~一部のブラウザーと互換性がない場合は<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>
于 2013-01-17T15:20:29.460 に答える
3

それは機能しますが、CSSは次のようにする必要があります

<style>
#b{display:none;}
div#a:hover div#b{display:inline}
</style>
于 2013-11-11T11:05:32.487 に答える