1.最后效果图 鼠标悬停文字内容时图片边框同时变颜色 ，同样悬停到图片上文字也变颜色
2.废话不多说开始教学
3.先把文字和边框用a标签套起来
4.给边框和文字各设一个id或者class
5.在css中用>(子选择器)选择 文字和图片的名字 后在{写下样式}
<!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>
.biankuang{
width: 250px;
margin: 0px auto;
/*让文字居中*/
text-align: center;
}
a{
color: black;
text-decoration: none;/*去下划线*/
}
.biankuang .yangshi{
width: 100%;
}
.biankuang .yangshi .diyi-tupian{
/*设置行高*/
line-height: 250px;
/*设置边框*/
border: 2px solid #BEC0C1;
}
.biankuang .yangshi .diyi-tupian img{
/*边框中图片居中*/
vertical-align: middle;
}
/* 让边框和文字同时被选中变颜色 */
.biankuang a:hover>.diyi-tupian,a:hover>.diyi-wenzi{
/*文字变颜色*/
color: #68B92F;
/*边框变颜色*/
border-color: #68B92F;
}
</style>
</head>
<body>
<div class="biankuang">
<a class="yangshi" href="#">
<p class="diyi-tupian" href="#">
<img src="/img/8.png">
</p>
<p class="diyi-wenzi">冷却塔</p>
</a>
</div>
</body>
</html>