CODEWITHSUNDEEP
htmlcssweb
MUHAMMAD LABEEB
MUHAMMAD LABEEB

Reputation: 17

How to add text div on top of another div while keeping the ability to hover over the div below it?

The following code is a simplified version of the problem im facing, know that the text has to be a separate div which will be placed on top using positioning, in short the text needs to be visible to user but should not affect anything on the website.

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

#box {
  width: 600px;
  height: 200px;
  background-color: yellow;
}

#box:hover {
  background-color: blue;
}

#text {
  position: relative;
  bottom: 50px;
}
<body>

  <div id="box"></div>

  <div id="text">i still want the color of the box to change even when im hovering over this text</div>

</body>

Upvotes: 0

Views: 54

Answers (2)

Abhinav Kumar
Abhinav Kumar

Reputation: 3036

This can not be possible with CSS alone, there is no way to select a parent element in css from child and update the style.

So, You can write a but of JS to do that. Here is the updated code.

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

#box {
  width: 600px;
  height: 200px;
  background-color: yellow;
}

#box:hover {
  background-color: blue;
} 
.blue{
  background-color: blue !important;
}

#text {
  position: relative;
  bottom: 50px;
}
<body>

  <div id="box"></div>

  <div id="text" onmouseout="update(false)" onmouseover="update(true)">i still want the color of the box to change even when im hovering over this text</div>
<script>
   function update(updateColor){
        let box = document.getElementById('box');
       if(updateColor){
          box.classList.add("blue");
       }else{
          box.classList.remove("blue");
       }        }
</script>
</body>

Upvotes: -1

Debsmita Paul
Debsmita Paul

Reputation: 1460

Add pointer-events: none to the text div.

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

#box {
  width: 600px;
  height: 200px;
  background-color: yellow;
}

#box:hover {
  background-color: blue;
}

#text {
  position: relative;
  bottom: 50px;
  pointer-events: none;
}
<body>

  <div id="box"></div>

  <div id="text">i still want the color of the box to change even when im hovering over this text</div>

</body>

Upvotes: 2

Related Questions