cursor：div上的指针不起作用

Question

让我疯狂。条形不会从.menu.container

继承光标

＆＃13;

＆＃13;

.menu.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px;
  transition: 0.4s;
}

＆＃13;

<div class="menu.container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为您正在定义一个名称为menu.container

的句点的类

您撰写的CSS被解释为class = 'menu container'

Answer 2

＆＃13;

＆＃13;

.menu_container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px;
    transition: 0.4s;  
   }

＆＃13;

<div class="menu_container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

班级名称中的点必须由CSS中的\转义 - 请参阅下面的演示：

.menu\.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px;
    transition: 0.4s;  
   }

<div class="menu.container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Answer 4

如果菜单和容器是两个类

.menu {
    display:inline-block;
    cursor: pointer !important;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px;
    transition: 0.4s;  
   }

<div class="menu container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>