Question

我可以使图标的悬停效果仅仅是字体很棒，但不是完整的单独元素。我希望每个元素在悬停时都有原始颜色。

如何才能获得正确的悬停效果？

以下是使用的HTML代码

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right socialnav">
                <li class="twitternav"><a href="https://twitter.com/HHAesthetics"TARGET="_blank"><i class="fa fa-twitter"></i></a></li>
                <li class="facebooknav"><a href="https://www.facebook.com/hardyhealthaesthetics/?fref=ts"TARGET="_blank"><i class="fa fa-facebook"></i></a></li>
                <li class="instagramnav"><a href="https://www.instagram.com/hardyhealthaesthetics/"TARGET="_blank"><i class="fa fa-instagram"></i></a></li>
                <li class="youtubenav"><a href="https://www.youtube.com/channel/UCLl1_1qs9nAtPLcMfQNJNhQ"TARGET="_blank"><i class="fa fa-youtube"></i></a></li>
                <li><a href="mailto:hardyhealthaesthetics@gmail.com"_blank"><i class="fa fa-envelope"></i></a></li>
            </ul>
          <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#home" class="scroll-to">Home</a></li>
                <li><a href="#about-us" class="scroll-to">About Us</a></li>
                <li><a href="#our-service" class="scroll-to">Our Services</a></li>
                <li><a href="#body" class="scroll-to">BODY SCULPTING</a></li>
                 <li><a href="#cli" class="scroll-to">Clinical</a></li>
                 <!--<li><a href="#test" class="scroll-to">Testimonials</a></li>-->
                
                <li><a href="#gale" class="scroll-to">Gallery</a></li>
                <li><a href="#promo" class="scroll-to">PROMOTIONS</a></li>
                <li><a href="#team" class="scroll-to">Team</a></li>
                <li><a href="#contact" class="scroll-to">Contact</a></li>
                </ul>

这是我尝试过的CSS代码。

.navbar-right .socialnav > li .facebooknav a:hover {
    color: #4060A5 !important;
    }
.social .fa-twitter:hover {
    color: #00ABE3;
}
.social .fa-instagram:hover {
color:#517fa4;
}
.social .fa-youtube:hover {
color:#C31A1E;
}

该网站为http://www.hardyhealth.com/（顶级酒吧社交媒体图标）

任何帮助都会很棒谢谢!!!

Answer 1

试试.twitternav:hover .fa { color: #yourcolor; }。等等。

将鼠标悬停在Navbar社交图标上

1 个答案: