2

私のhtmlは（ヘッダーのみ）

<div id="msg_wrapper">
    <div class="msg_header media unread>
      <a class="pull-left"></a>
      <div class="media-body">
        <h4 class="media-heading">
        </h4>
      </div>
    </div>
    <div id="side" class="pull-right">
      <div id="sent_at">
        <div class="timeago" >
        </div>
      </div>
      <div id="msg_header_side">
        <div id="msg_header_icons">
        </div>
          </div>
        </div>
      </div>

CSSは

    .media.unread:hover + #side  #msg_header_side{
    visibility: visible;
    }

    #sent_at {
        float:right;
    }
    .msg_header{
        position: relative;
        margin-bottom: 10px;
    }

    #msg_header_side{
        visibility: hidden;
    }
    #msg_header_icons{

        background-color: transparent;
        float: right;
    }

    #side{
        position: absolute;
        top: 0;
        right: 0;
    }

    #msg_wrapper{
        position: relative;
    }

同様のタグでjsfiddleを作成し、状況を説明するために色を追加しました

青色 ( #msg_header_side) は、黄色 ( ) の任意の部分にカーソルを合わせたときに表示されるオプションを含むセクションです。.msg_header問題は、マウス カーソルが黄色にある場合にのみ、現在のセレクター (私ができる最善の方法) が青色を表示することです。

このように（スクリーンショットはマウスカーソルをキャプチャしませんでした-黄色になっています）：

ここに画像の説明を入力

カーソルが赤 ( #side) にある場合 - 青が消える

このように（スクリーンショットはマウスカーソルをキャプチャしませんでした-赤くなっています）： ここに画像の説明を入力

私のセレクターは、 .media.unread:hover + #side #msg_header_side 「メディアのクラスであり、ホバーしたときに未読であり、子としてmsg_header_sideの側に可視性があります。可視性があります。うまく機能しません..

4

3 に答える 3

1

「+」記号についてはよくわかりませんが、これには問題があるはずです。

.media.unread:hover,
#side  #msg_header_side{
visibility: visible;
}
于 2012-12-10T13:53:01.047 に答える
1

何を達成しようとしているのかよくわかりませんが、黄色の背景を持つ要素1と赤い背景を持つ要素2を取りたいと思います。両方をホバーすると、青色の要素3が表示されます。まず最初に、黄色の要素が赤の要素を取り囲んでいないことに注意してください。これらは兄弟であるため、通常、赤の要素は前の兄弟である黄色の要素の上にあることがわかります。赤の要素を入力すると、黄色の要素とセレクターが残ります。

オリジナル：

.media.unread:hover + #side  #msg_header_side {
    visibility: visible;
}

クラス .media.unread(yellow) を持つ #side's(red) 兄弟がホバーされている場合、 #side(red) 要素の子でなければならない #msg_header_side(blue) id を持つ要素をブラウザに表示するように指示します。

赤い要素もホバーされている場合に要素を表示するようにブラウザーに指示するには、最初の行にコードを追加して、次のように変更する必要があります。

変更されました：

.media.unread:hover + #side  #msg_header_side, #side:hover  #msg_header_side {
    visibility: visible;
}

ご覧のとおり、最初の行のみが変更されました。

PS私が書いた混乱について申し訳ありません:)セレクターの命名を再考することもできます。クラスとIDが非常に多いため、より良いものになる可能性があります。

于 2012-12-10T16:04:40.553 に答える
1

#msg_header_sideのデスカンダントとして照合する追加のセレクターを追加する必要があります#side:hover

.media.unread:hover + #side #msg_header_side, #side:hover #msg_header_side

それがあなたが望んでいたことを願っています。

于 2012-12-10T13:59:53.633 に答える