html - 如何在 CSS 中创建类似 Bootstrap 的边框

Question

我用 CSS 创建了一个汉堡菜单。我想做两件事:

• 当用户点击它时，创建bootstrap like边框(浅色)如下图所示。
• 当用户点击/悬停在汉堡包上时反转颜色，即将我的汉堡包边框更改为黑色，背景更改为白色，内部 div 遵循相同的模式。为此，我添加了一个 css :hover，但不知道如何让子元素跟随父元素。

---

.hamburger:hover {
      background-color: whitesmoke;
    }

代码: https://jsfiddle.net/rcxfwdm9/7/

Answer 1

您可以将多个 css 选择器组合在一起

.hamburger:hover

表示悬停时选择所有带有汉堡包类的元素

.hamburger div

表示选择带有汉堡类的元素内的所有div元素

所以在组合的时候

.hamburger:hover div

这意味着在悬停时选择带有汉堡包类的元素内的所有 div 元素

.hamburger, hamburger div {
    transition: all .15s;
}

.hamburger div {
    margin: 0.4rem 0px;
    border: 1px solid white;
    background-color: white;
    border-radius: 5px;
}

.hamburger:hover div {
  border-color: #343a40;
}
.hamburger:hover {
  box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
  background-color: white;
  border-color: #343a40;
}

演示

https://jsfiddle.net/vyr6bc8f/18