网页设计怎么单独的设计多种a:hover?
发布网友
发布时间：2022-04-26 02:50
共1个回答
热心网友
时间：2022-06-20 05:49
因为css无法选择父元素，但是能选择兄弟元素，所以我们没必要那么死板，可以让方框和字体作为兄弟节点，让字体悬浮在方框上就行了。想要单独给某个a设置hover，可以直接利用该a的id，或者用父元素的后代选择器nth-child()，不过不推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>icon</title>
<style type="text/css">
a {
text-decoration: none;
}
#box {
width: 306px;
height:306px;
position: relative;
overflow: hidden;
}
#icon{
width: 300px;
height: 300px;
position: absolute;
border: 1px solid black;
}
#icon:hover{
border: 3px solid red;
}
#icon img{
width: 200px;
height: 200px;
border: 1px solid orange;
border-radius: 100px;
margin-left:50px;
margin-top: 20px;
}
#txt{
width: 300px;
display: block;
position: absolute;
bottom: 5px;
text-align: center;
cursor: pointer;
z-index: 100;
}
#txt:hover{
color: green;
}
#txt:hover + #icon{
border: 3px solid green;
}
</style>
</head>
<body>
<div id="box">
<a id="txt">请放进来</a>
<a id="icon"><img src=""/></a>
</div>
</body>
</html>
