1

これを機能させようとしていますが、なぜ機能しないのかわかりません。これをトラブルシューティングする方法、つまりエラーを確認する方法はありますか

私が達成しようとしているのは、stat1 div にカーソルを合わせたときに showhim div に情報を表示することですが、それは起こっていません。

私はそれをここに置きます：

http://jsfiddle.net/ksvrY/39/

<div id="post-wrap">
   <div class="showhim" id="stat1_text">
        This is some example test<br />
        This is another line<br />
        And another one<br />
        And a final one
  </div>


    <div id="stat1" class="stat1">
        <a href="#">Hover over this div</a>
    </div>
</div>

.showhim
{
    display: none;
    margin-bottom: 30px;
}

.stat1:hover .showhim
{
    display: block;
}
4

4 に答える 4

2

兄弟選択を行うことができます。

<div id="post-wrap">
<div id="stat1" class="stat1">
    <a href="#">Hover over this div</a>
</div>

 <div class="showhim" id="stat1_text">
    This is some example test<br />
    This is another line<br />
    And another one<br />
    And a final one
</div>

.showhim
{
  display: none;
  margin-bottom: 30px;
}

.stat1:hover ~ .showhim
{
  display: block;
}
于 2013-02-05T16:58:31.573 に答える
2

それが機能するには、.showhimが の子要素である必要があります.stat1。

于 2013-02-05T16:39:15.260 に答える
2

編集：ポールが指摘したように、兄弟セレクターを使用できます。したがって、この場合、純粋なcssでこれを行う方法が実際にあります

.stat1の親ではありません.showhim。

JavaScript を使用できます。だから（jQueryを使って）のようなもの：

$('.stat1').mouseover(function(){
  $('.showhim').show();
}).mouseout(function(){
  $('.showhim').hide();
});

http://jsfiddle.net/ksvrY/50/を参照してください

于 2013-02-05T16:38:08.940 に答える
0

ポールに同意する

そして、ここに別の解決策があります：

.showhimに移動#stat1:

<div id="post-wrap">
    <div id="stat1" class="stat1">
        <a href="#">Hover over this div</a>
        <div class="showhim" id="stat1_text">
            This is some example test<br />
            This is another line<br />
            And another one<br />
            And a final one
        </div>
    </div>
</div>
于 2013-02-05T18:16:17.257 に答える