Question 216547 in Html Question posted in
Some basic documentation can be found here.

Html – CSS hovering with in a child div

Is it possible to change the Background of body or parent div while hover a child div ?
How to change the background color of a parent div or the body part while hovering the text in a child div.
Give me the solution for this

.

.

Tags:

3

Answers


  1. 0

    You should use :has for this.

    .parent:has(.child:hover) { /* styles */
    Login or Signup to reply.
  2. 0

    Yes, it is possible to change the background color of a parent div or the body while hovering over a child div using CSS.

    You can achieve this by utilizing the CSS selector known as the "sibling selector" or "general sibling combinator.

    .parent {
    background-color: #f0f0f0;
    padding: 20px;
}

.child { 
    padding: 10px;
    border: 1px solid #ccc;
}

.child:hover ~ body {
    background-color: #e0e0e0;
}
    <div class="parent">
    <div class="child">Hover over me!</div>
</div>

    In this example, when you hover over the text inside the child div, it will change the background color of the parent div (.parent) and the body.

    The child div is used as the trigger for changing the background color of the parent div and the body.

    Login or Signup to reply.
  3. 0

    You can use :has() selector but it has limited browser support 

    .parent{
  background: green;
  height: 50px;
}

.child{
  background: red;
}

.parent:has(.child:hover){
  background: blue;
}
    <div class="parent">
  I am the parent
  <div class="child">
    I am the child
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search