PS: Through the hover behavior, only the nodes of its child elements can be obtained, and the style of the child elements can be modified. If you want to modify the style of other nodes, you can get it through special selectors such as +> in the CSS selector.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover行为</title>
<style>
.contain{
width: 100px;
height: 100px;
color: red;
}
.tip1,.tip2{
background-color: aqua;
color: blue;
display: none;
}
//Get the node through a special selector
.contain:hover + .tip1{
display: block;
}
//Get the node by getting the child node
.contain:hover .tip2{
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<div class="contain">
Point i have a hint
<div class="tip2">
I'm Prompt 222
</div>
</div>
<div class="tip1">
I am Prompt 111
</div>
</div>
</body>
</html>