如何在CSS中点击创建边框状的Bootstrap

问题描述

我在CSS中创建了一个汉堡菜单。我想做两件事：

用户单击它时，如下图所示创建bootstrap like边框（浅色）。
当用户单击/悬停汉堡包时反转颜色，即将我的汉堡包边框更改为黑色，将背景更改为白色，将内部div更改为相同样式。为此，我添加了一个CSS :hover，但不知道如何使子元素跟随父元素。

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

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

解决方法

您可以将多个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

您可以使用CSS box-shadow来做到这一点。

示例：

.btn-grey {
  border: none;
  outline: none;
  padding: 5px;
  background-color: grey;
  border-radius: 5px;
  transition-duration: 0.5s;
  color: white;
}

.btn-grey:focus {
  box-shadow: 0 0 0 3px darkgray;
}

<button class='btn-grey'>Button</button>

bootstrap-4 html twitter-bootstrap