Question

以下是the plunker where I am trying to make＆＃34;所有对话＆＃34;响应。

我使用了以下样式：

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

我想要达到的目的是展示＆＃34;所有对话＆＃34;一旦UI很小就列出。我可以看到background: yellow正在运行，但我看不到ID #user-list
如果可能，请使用data-toggle和data-target建议相同的切换行为。我试过但它没有工作:(

谢谢！

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

悬停效果无法按预期工作 - UI响应

1 个答案: