2017-08-23 34 views
1

驱动我坚果。酒吧不从.menu.container光标:在div上的指针不起作用

.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>

+0

将'''menu.container''重命名为''''menu-container'''并且你的问题应该被解决,规则目前在'''​​.menu'中被解析为'''.container''' ''。 –

+0

实际上,它被解析为'.container' _and_ a'.menu' –

+0

哦,是吗?总是混淆这些关系规则。猜猜'''>'''在那里。 –

回答

2

这是因为你的名字menu.container

你写被解释为class = 'menu container'的CSS中定义一个周期的类继承光标

1

.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>
01在类名个

1

点必须由\在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>

+1

我不知道这是可能的...很好! –

0

如果菜单和集装箱两类

.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>