Question

我有2个像这样的简单div？

<div id="parent">
 <div class="container">
  <a href="#">dummy link</a>
  <a href="#">dummy link</a>
  <a href="#">dummy link</a>
 </div>
</div>

父div有一个改变它的背景颜色的悬停伪类，另一方面，子容器根本没有悬停状态。

我发生了什么事情是我将子容器悬停，父类的悬停类被应用，好像我徘徊了父级，尽管我没有。如何使用JavaScript来阻止它？

这是一个演示代码段

#parent{
    width: 120px;
    height: 31px;
    float: left;
    background-color: blue;
    position: relative;
    border: none;
    text-decoration: none;
    display: inline-block;
    outline: none;
    cursor: pointer;}

#parent:hover {
      background-color: red; }

.container{
     margin-top:50px;
      width: 100%;
      height: 150px;
      word-wrap: break-word;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: whitesmoke;
      box-sizing: border-box;
      display: block;
}

  <div id="parent">
     <div class="container">
      <a href="#">dummy link</a>
      <a href="#">dummy link</a>
      <a href="#">dummy link</a>
      <a href="#">dummy link</a>
      <a href="#">dummy link</a>
      <a href="#">dummy link</a> 
      <a href="#">dummy link</a>
      <a href="#">dummy link</a>
      <a href="#">dummy link</a>
     </div>
    </div>

更新我在容器内有链接，我需要cursor:poniter;来发送它并且pointer-events:none;完全破坏了溢出时分配给容器的滚动

1 个答案:

答案 0 :(得分：1)

Answer 1

单独使用CSS，您需要将pointer-events: none;添加到容器CSS：

＆＃13;

#parent {
  width: 120px;
  height: 31px;
  float: left;
  background-color: blue;
  position: relative;
  border: none;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
}
#parent:hover {
  background-color: red;
}
.container {
  margin-top: 50px;
  width: 100%;
  height: 150px;
  word-wrap: break-word;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: whitesmoke;
  box-sizing: border-box;
  display: block;
  pointer-events: none;
}

＆＃13;

<div id="parent">
  <div class="container"></div>
</div>

＆＃13;

如何使用JavaScript停止（悬停子，父级悬停状态）

1 个答案: