悬停效果未按预期工作 - 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 很小时显示“所有对话”列表。我可以看到 background: yellow 正在工作，但我看不到 ID #user-list

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

谢谢！

Answer 1

您的规则是错误的，您的意思是#user-list 是#dropdownMenu2 的子项。

在您的代码中，我可以看到 #user-list 不是孩子也不是兄弟姐妹。 您将按钮包裹在 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;
}
}

关于hover in mobile，确实不太一致。我更喜欢使用 click for mobile，所有悬停效果都是：

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