如何将鼠标悬停在圆圈上

Question

#first .fas {
color: #13131F; 
}

.fas:hover {
opacity: 0.7;
background: #FF6600;  /* here hover is work but I am trying to apply hover on the circle*/ 

} 

.footer {
padding-top: 4.625rem;
padding-bottom: 0.5rem;
}

.footer .footer-col {
margin-bottom: 2.25rem;
}

.footer h4 {
margin-bottom: 1rem;
}

.footer .list-unstyled .fas {
color: #00bfd8;
font-size: 0.5rem;
line-height: 1.375rem;
}

.footer .list-unstyled .media-body {
margin-left: 0.625rem;
}

.footer .fa-stack {
margin-bottom: 0.75rem;
margin-right: 0.5rem;
font-size: 1.5rem;
}

.footer .fa-stack .fa-stack-1x {
color: #fff;
transition: all 0.2s ease;
}

.footer .fa-stack .fa-stack-2x {
color: #00bfd8;
transition: all 0.2s ease;
}

.footer .fa-stack:hover .fa-stack-1x {
color: #fff;
}

.footer .fa-stack:hover .fa-stack-2x {
color: #00a7bd;
}

<div id="content">
    <div class="col-md-4">
        <div class="footer-col last">
            <h4>Social Media</h4>
            <span class="fa-stack">
                <a id="first" href="#your-link">
                    <i  class="fas fa-circle fa-stack-2x"></i>
                    <i  class="fab fa-facebook-f fa-stack-1x"></i>
                </a>
            </span>
        </div>
    </div>
</div>

我正在尝试应用悬停功能，但我的悬停功能可以运行，但无法在圈子中运行

在上图中，悬停功能有效，但悬停功能无法在圆上工作

Index.cshtml

<style>

    #first .fas {
        color: #13131F; 
    }

    .fas:hover {
        opacity: 0.7;
        background: #FF6600;  /* here hover is work but I am trying to apply hover on the circle*/ 
        
    } 

</style>
<div id="content">
      <div class="col-md-4">
                    <div class="footer-col last">
                        <h4>Social Media</h4>

                        <span class="fa-stack">

                            <a id="first" href="#your-link">
                                <i  class="fas fa-circle fa-stack-2x"></i>        //Here I am applying to hover on circle but not works
                                <i  class="fab fa-facebook-f fa-stack-1x"></i>
                            </a>

                        </span>

style.css

.footer {
    padding-top: 4.625rem;
    padding-bottom: 0.5rem;
}

.footer .footer-col {
    margin-bottom: 2.25rem;
}

.footer h4 {
    margin-bottom: 1rem;
}

.footer .list-unstyled .fas {
    color: #00bfd8;
    font-size: 0.5rem;
    line-height: 1.375rem;
}

.footer .list-unstyled .media-body {
    margin-left: 0.625rem;
}

.footer .fa-stack {
    margin-bottom: 0.75rem;
    margin-right: 0.5rem;
    font-size: 1.5rem;
}

.footer .fa-stack .fa-stack-1x {
    color: #fff;
    transition: all 0.2s ease;
}

.footer .fa-stack .fa-stack-2x {
    color: #00bfd8;
    transition: all 0.2s ease;
}

.footer .fa-stack:hover .fa-stack-1x {
    color: #fff;
}

.footer .fa-stack:hover .fa-stack-2x {
    color: #00a7bd;
}

以上是我的外部样式表

我正在尝试但不起作用的东西：

第一：

.fas .fa-circle fa-stack-2x:hover {
        opacity: 0.7;
        background: #FF6600; /* here hover is work but I am trying to apply hover on the circle*/
    } 
    /* 

秒：

.fas .fa-circle:hover {
        opacity: 0.7;
        background: #FF6600; /* here hover is work but I am trying to apply hover on the circle*/
    } 
    /* 

悬停是可行的，但不是圆的，我想我想念课或嵌套课

帮助

Answer 1

编辑

这将解决：

    #first .fas:hover {
      opacity: 0.7;
      color: #FF6600;
    }

    #first .fab {
      pointer-events: none;
    }

Answer 2

我无法运行您的代码-图像丢失-但这是一个示例。 您可以设置容器div，使用# Python3 program to demonstrate the use of # remove() method # removes 'a' from list2 list2 = [ 'a', 'b', 'c', 'd' ] list3=list2 list3.remove('a') print(list2) print(list3) 设置容器，以产生一个圆形，然后将悬停背景设置为该容器。

C:\Users\littlefoot\AppData\Roaming\SQL Developer\SqlHistory

border-radius:50%