极客教程HTML 如何使父级Div激活子Div的鼠标悬停和点击样式
在本文中，我们将看到如何使父级Div在鼠标悬停和点击时激活子Div的样式。我们可以使用伪类（如:hover和:active）来实现这一点。
实现父级Div激活子Div鼠标悬停和点击样式的方法
- 纯CSS方法：使用伪类
- CSS和JavaScript方法：不使用伪类
方法1：使用纯CSS
伪类
伪类是CSS中用于定义HTML元素在用户交互或元素状态下的特殊状态的关键字，而无需额外的类或JavaScript。
- :hover： 当用户将鼠标指针悬停在元素上时，该伪类将选择该元素。
- :active： 当元素正在被激活时，通常是用户点击该元素时，该伪类将选择该元素。
示例： 在这个示例中，我们将使用CSS伪选择器使父级Div在鼠标悬停和点击时激活子Div的样式。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.parent-div {
width: 200px;
height: 200px;
background-color: lightgray;
}
.child-div {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 50px;
transition: background-color 0.3s;
}
.parent-div:hover .child-div {
background-color: lightgreen;
}
.parent-div:active .child-div {
background-color: coral;
}
</style>
</head>
<body>
<div class="parent-div">
<div class="child-div">Hover and Click Me</div>
</div>
</body>
</html>
输出：
方法2：使用CSS和JavaScript
例子： 在本文中，我们将使用CSS和JavaScript来使父级div在鼠标悬停和选中时激活子级div的样式。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.parent-div {
width: 200px;
height: 200px;
background-color: lightgray;
}
.child-div {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 50px;
}
.child-div.active {
background-color: coral !important;
}
</style>
</head>
<body>
<div class="parent-div">
<div class="child-div">
Hover and Click Me
</div>
</div>
<script>
const parentDiv =
document.querySelector('.parent-div');
const childDiv =
parentDiv.querySelector('.child-div');
parentDiv.addEventListener('click', () => {
childDiv.classList.toggle('active');
});
parentDiv.addEventListener('mouseover', () => {
childDiv.style.backgroundColor = 'lightgreen';
});
parentDiv.addEventListener('mouseout', () => {
childDiv.style.backgroundColor = 'skyblue';
});
</script>
</body>
</html>
输出：
