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

时间:2017-01-24 14:42:25

标签: css twitter-bootstrap responsive-design

以下是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-toggledata-target建议相同的切换行为。我试过但它没有工作:(

  3. 谢谢!

1 个答案:

答案 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
}