如何解决将鼠标悬停在列表中时出现问题
第一次在这里发布问题,希望有人能帮忙! 我想创建一个社交媒体图标/链接列表
ng serve
<div class="social-links">
<ul>
<li class="m-link">
<a href=""><i class="far fa-envelope"></i></a>
</li>
<li class="m-link">
<a href=""><i class="fab fa-linkedin-in"></i></a>
</li>
<li class="m-link">
<a href=""><i class="far fa-address-card"></i></a>
</li>
</ul>
</div>
我的问题是这种方式的悬停颜色不适用于图标/链接,我试图像这样为“ .m-link a”添加一个额外的悬停。
.m-link {
width: 2em;
height: 2em;
text-align: center;
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 2.5em;
line-height: 2em;
color: #e2e2e2;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.m-link:hover {
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
text-decoration: none;
color: #e2e2e2;
}
,但是通过这种方式,颜色仅在光标位于链接上时才适用,而当我将鼠标悬停在列表元素上时才适用。 还是个初学者,有人帮忙吧!
解决方法
您需要像这样将目标定位在悬停的元素内
.m-link:hover a > i { /* 'on hover on .m-link class element,then i inside a will take this css code */
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link {
width: 2em;
height: 2em;
text-align: center;
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 2.5em;
line-height: 2em;
color: #e2e2e2;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.m-link:hover a > i {
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
text-decoration: none;
color: #e2e2e2;
}
<script src="https://kit.fontawesome.com/9114d9acc8.js" crossorigin="anonymous"></script>
<div class="social-links">
<ul>
<li class="m-link">
<a href=""><i class="far fa-envelope"></i></a>
</li>
<li class="m-link">
<a href=""><i class="fab fa-linkedin-in"></i></a>
</li>
<li class="m-link">
<a href=""><i class="far fa-address-card"></i></a>
</li>
</ul>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。