Breaking News: Grepper is joining You.com. Read the official announcement!

parent hover and child hover at the same time

Add Answer

Ryan Hood answered on September 22, 2020 Popularity 9/10 Helpfulness 3/10

answer parent hover and child hover at the same time

related how to select child when hover on parent element css

related css make hover on parent child move

related how to select child when hover on parent element css

parent hover and child hover at the same time

Comment

.child-container {
	margin-right: 5px;
    padding: 10px 12px;
    border-radius: 50%;
}
            
.parent-container:hover {
	color: rgb(20, 89, 136); //This is the color for all the child-container when parent is hover//
}

.parent-container:hover .child-container {
	background-color: rgb(10, 23, 31); //This is the background-color of the chosen child-container//
}
//When you hover the parent-container, the chosen child-container hover will also work along with the parent-container hover//
//The chosen child-container has also hover style different from the parent-container hover//
//If the parent-container is mouse hover the child-container hover will be trigger too//

Popularity 9/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css hover parent time

Link to this answer
Share Copy Link

Contributed on Jun 03 2022

Ryan Hood

0 Answers Avg Quality 2/10

Closely Related Answers

how to select child when hover on parent element css

Comment

/* Selecting a child element on :hover parent element*/ 
.parent:hover .child {
   /* ... */
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 22 2020

deejay

0 Answers Avg Quality 2/10

css make hover on parent child move

Comment

.parent {
    background: white;
    pointer-events: none; // this disable the hover on the .parent

    &:hover {
      background: gray; // hover applied to .parent but disabled by the previous pointer-events: none;
    }
    a {
      pointer-events: auto; // this enable the pointer again
      &:hover {
        color: red; // this hover only for the a 
      }
    }
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: www.davdenic.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

Thoughtless Tuatara

0 Answers Avg Quality 2/10

how to select child when hover on parent element css

Comment

<!DOCTYPE html>
<html>
<head>
<style>
.parent{
  width: 500px;
  height: 100px;
  background-color: red;
  cursor:pointer;
}

.parent:hover > .child{
 animation-name: example;
 animation-duration: 1s;
 animation-timing-function: ease;
}
@keyframes example {
  0% {margin-left:0px; color:white;}
  50%{margin-left:200px;}
}
</style>
</head>
<body>

<div class="parent">
	<h3 class="child">hello js</h3>
</div>

</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: css element hover parent select when

Link to this answer
Share Copy Link

Contributed on May 30 2021

Outlander

0 Answers Avg Quality 2/10

parent hover and child hover at the same time

Contents

More Related Answers

parent hover and child hover at the same time

Closely Related Answers

how to select child when hover on parent element css

css make hover on parent child move

how to select child when hover on parent element css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.