悬停效果未按预期工作 - UI 响应性

Question

这是我试图使"所有对话"响应的 plunker。

我使用了以下样式：

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

1. 我想要实现的是，一旦 UI 变小时显示"所有对话"列表。我可以看到background: yellow正在工作，但我看不到 id #user-list

2. 如果可能，请使用 data-toggle 和 data-target 建议相同的切换行为。我试过了，但它不起作用:(

谢谢！

Answer 1

你的规则是错误的，你的意思是 #user 名单是 #dropdownMenu2 的孩子。

在您的代码中，我可以看到 #user 列表既不是孩子也不是兄弟姐妹。您将按钮包装在div 中（下拉all_conversation）。

要么将用户列表移动到按钮 #dropdownMenu2 之后的div，要么删除包装的div。

然后，您可以将 CSS 规则更改为：

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

编辑：

抱歉回复晚了。

看到您的更新后，您绝对给了错误的元素。

聊天消息应该保持相对。

根据更改规则

@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
}