<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 100px;
height: 100px;
background-image: url('https://img-mid.csdnimg.cn/release/static/image/mid/ask/886398172356190.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit');
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.content::after {
content: "";
position: absolute;
left: -100%;
top: 0;
width: 100px;
height: 100px;
background-image: url('https://img-mid.csdnimg.cn/release/static/image/mid/ask/886398172356190.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit');
background-repeat: no-repeat;
background-size: cover;
transition: all 0.5s linear;
}
.content:hover::after {
left: 0;
}
</style>
</head>
<body>
<div class="content ">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.odiv{
width: 100px;
height: 100px;
transition: all 2s linear;
border: 1px solid #cccccc;
}
.odiv1{
width: 10px;
height: 10px;
transition: all 5s linear;
border: 1px solid #cccccc;
opacity: 0;
}
.odiv:hover{
background-color: #ff0;
}
.odiv:hover .odiv1{
background-color: #f00;
opacity:1
}
</style>
</head>
<body>
<!-- hover 使用注意 1.过渡在父元素上 2.控制的元素包含在里面 -->
<!-- display:none 没有过渡 相当于v-if opacity有过渡 v-show -->
<div class="odiv">
odiv
<div class="odiv1">odiv1</div>
</div>
<div class="odiv2">odiv2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.phone-nav:hover+.account-nav {
color: red
}
</style>
<body>
<div class="login_nav">
<span class="phone-nav">2222qqqqqqqqqqq</span>
<span class="account-nav">1111qqqqqqqqqqqqq1</span>
</div>
</body>
</html>