1

div クラスを表示しようとしていますが、表示されません。何が間違っているのかわかりません。これが私がやっていることです。

だから、私はテーブルを持っています。これのポイントは、テーブルの内容の 1 つにカーソルを合わせて、リンクの詳細を表示することです。この場合「Hover Me!」

file.html

<div id="bigBody">
<table class="tableClass">
<tr>
<td>
<a class="hoverHereToPopUp">Hover Me! </a>
</td>
</tr>
<table> /*Just to keep the table short */ 

<div class="hoverPopUp">
    <p>This is a Hover</p>
</div> /*EO HoverPopUp */
</div> /*EO bigBody */

スタイル.css

div.hoverPopUp {
    display:none;
    width:auto;
    height:auto;
    border:dotted purple;
}

a.hoverHereToPopUp:hover + div.hoverPopUp {
    display: block;
}

問題をデバッグするために、いくつかのスタイルを追加しました。

a.hoverHereToPopUp {
    color:red;
    border:green dotted;
}

a.hoverHereToPopUp:hover {
    color:white;
    border:yellow dashed;
}

ホバーは色を変えていますが、divは表示されていません。

私は何を間違っていますか？

これをクロムで表示します。

ホバーはテーブルの中にあります。これは DisplayDiv の中にあり、そのコンテナには popUp 用の別の divContainer があります。したがって、BIG ボックスには 2 つの小さなボックスがあり、1 つにはホバー (テーブル) があり、もう 1 つ (div) はポップアップ用です。これが問題ですか？？？

4

2 に答える 2

1

私が正しく理解している場合、非表示の div は、ホバーを取得する div 内にある必要があります。

このようなもの：

<div>
    Hover over me
    <p>This is hidden</p>
</div>

参照: http://jsfiddle.net/webbymatt/URwNz/

現在のマークアップの方法では、これは CSS では機能しません。あなたがする必要があるのは、非表示領域をホバー可能な div の内側に置くことです。このような：

<div id="bigBody">
  <table class="tableClass">
    <tr>
      <td>
        <a class="hoverHereToPopUp">
          Hover Me! 
          <p>This is a Hover</p>
        </a>
      </td>
    </tr>
  </table> /*Just to keep the table short */ 
</div>

次に、CSSを使用して

.hoverHereToPopUp p {
  display: none;
}
.hoverHereToPopUp:hover p {
  display: block;
}
于 2013-09-04T15:42:57.803 に答える
0

@Slevinが指摘したことから、提供されたコードは正常に機能しています。ライブコードを検査するコードの残りの部分を見て、表示しようとしている要素が他の場所に隠されているかどうかを確認することをお勧めします。

于 2013-09-04T15:40:08.503 に答える