ホバー効果が期待通りに機能しない - UIの反応

Question

ここにはthe plunker where I am trying to make「すべての会話」が反応します。私はスタイリングの下に使用している

：

@media (max-width: 767px) { 
    #user-list { 
    display: none; 
    } 
    #dropdownMenu2:hover > #user-list{ 
    display: block; 
    } 
    #dropdownMenu2:hover{ 
    background: yellow; 
    } 
} 

1. 私が達成したい何がUIが小さいたら、「すべての会話」リストを表示することです。 data-toggleとdata-targetを使用して同じのためのトグル動作を提案してください私はbackground: yellowが動作していることを見ることができますが、可能であれば、私はIDに#user-list

2. を参照してください傾けます。あなたのルールは何を言っていることは＃ユーザーリストは＃dropdownMenu2の子であるということです、間違っている私がしようとしたが、それは:(

ありがとう！

Answer 1

を働いていませんでした。

にあなたのコードは＃user-listが子でも兄弟でもないことが分かります。 divで囲まれたボタンがあります（ドロップダウンall_conversation）

ボタンのすぐ後にdivを押して、折り返し部分を削除してください。

そして、あなたがCSSルールを変更することができます。

#dropdownMenu2:hover + #user-list{ 
    display: block; 
    } 

編集：返事が遅れについて

申し訳ありません。

更新を確認した後、間違った要素を絶対的に与えています。

chat-msgsは相対的なままにしてください。モバイルでのホバーについて

@media (max-width: 767px){  
#dropdownMenu2:hover + #user-list, #user-list:hover { 
    display: block; 
    position: absolute; 
    width: 100%; 
    z-index: 100; 
    background: #fff; 
} 
} 

に従って

変更ルールは、それは確かに本当に一貫性がありません。モバイル向けクリックを使用するのが好きで、すべてのホバー効果は次のとおりです。

@media (min-width: 1025px){ 
    //all hover rules 
}