以下是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;
}
}
我想要达到的目的是展示"所有对话"一旦UI很小就列出。我可以看到background: yellow
正在运行,但我看不到ID #user-list
如果可能,请使用data-toggle
和data-target
建议相同的切换行为。我试过但它没有工作:(
谢谢!
答案 0 :(得分:1)
您的规则是错误的,您所说的是#user-list是#dropdownMenu2的孩子。
在你的代码中我可以看到#user-list不是孩子也不是兄弟姐妹。 你把按钮包裹在div中(下拉all_conversation)。在按钮#dropdownMenu2之后移动用户列表inisde div,或者删除包装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;
}
}
关于在移动设备中悬停,它确实不是真的一致。我更喜欢使用click for mobile,所有悬停效果都是:
@media (min-width: 1025px){
//all hover rules
}