CODEWITHSUNDEEP
javascriptjqueryhtmlhoveranchor
AndrewMk
AndrewMk

Reputation: 693

How to stop (hover child, parent hover state fires up) with JavaScript

I've got 2 simple divs like this 

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

the parent div has a hover pseudo class that changes it's background color, on the other side the child container has no hover state at all.

What happens is I hover the child container, the hover class that of the parent is applied as if I hovered the parent though I did not. how to stop this with JavaScript ?

Here's a demo snippet

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

update I've got links inside the container and I need the cursor:poniter; fot it
and the pointer-events:none; totally destroys the scroll assigned to the container in case of overflow

Upvotes: 0

Views: 109

Answers (1)

j08691
j08691

Reputation: 207861

Using CSS alone you'd need to add pointer-events: none; to the container CSS:

#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;
}
<div id="parent">
  <div class="container"></div>
</div>

Upvotes: 1

Related Questions