html - 无法使悬停工作

Question

我对非常简单的事情有很大的问题。我无法更改 div 中背景的颜色。我正在使用引导程序 3.3.7。有我的代码

#In:hover {
    background-color: #2E2E2F;
}
#Up:hover{
    background-color: aquamarine;
}

<div id="Signupin" class="col-xs-12 col-sm-6 col-md-4 container-fluid" style = "height: 70px; margin: 0px; padding: 0px;">
    <div class="row" style=" height: 70px;">
        <div id = "Sign" class = "col-xs-4 col-sm-4 col-md-4" style = "font-size:50px;   text-align: center; height: 65px;  background-color: white;">
           <p style = "margin: 0px; padding:  0px;font-family: monospace;">Sign</p> 
        </div>
    
     <!-- I would like to change background color of these two(Up and In) when the mouse is overlayed. -->
     
        <a href="C:\FreeGuide\HTML_CSS\Sign Up\signup.html">
      
            <div id = "Up" class = "col-xs-4 col-sm-4 col-md-4" style="height: 70px; text-align: center; background-color: #B7B7AC ">    
     
                <p style = "font-size: 50px; color: gainsboro;font-family: monospace;">Up</p>
            </div>                      
        </a>
      
        <a>
            <div id = "In" class = "col-xs-4 col-sm-4 col-md-4" style = "background-color: #0E2E2F;text-align: center; height: 70px;">
    
                <p  style = "font-size: 50px;font-family: monospace; color: gainsboro;">In</p>
    
            </div>
        </a>
    </div>
</div>
             

         

你能告诉我问题出在哪里吗？谢谢你。

标签： htmlcsstwitter-bootstrap-3

Answer 1

因为您使用了内联背景，但您需要使用内部 CSS 进行悬停，如下所示。

见下面它现在的工作： -

#In{background-color: #0E2E2F;}
#In:hover {
    background-color: #2E2E2F;
}
#Up{ background-color: #B7B7AC }
#Up:hover{
    background-color: aquamarine;
}

<div id="Signupin" class="col-xs-12 col-sm-6 col-md-4 container-fluid" style = "height: 70px; margin: 0px; padding: 0px;">
                   <div class="row" style=" height: 70px;">
                    <div id = "Sign" class = "col-xs-4 col-sm-4 col-md-4" style = "font-size:50px;   text-align: center; height: 65px;  background-color: white;">
                       <p style = "margin: 0px; padding:  0px;font-family: monospace;">Sign</p> 
                    </div>
                    
                     <!-- I would like to change background color of these two(Up and In) when the mouse is overlayed. -->
                     
                     <a href="C:\FreeGuide\HTML_CSS\Sign Up\signup.html">
                      
                     <div id = "Up" class = "col-xs-4 col-sm-4 col-md-4" style="height: 70px; text-align: center;">    
                     
                     <p style = "font-size: 50px; color: gainsboro;font-family: monospace;">Up</p>
                    </div>                      
                      </a>
                      
                    <a>
                    <div id = "In" class = "col-xs-4 col-sm-4 col-md-4" style = "text-align: center; height: 70px; 
                    ">
                    
                    <p  style = "font-size: 50px;font-family: monospace; color: gainsboro;">In</p>
                    
                    </div>
                       </a>
                </div>
                </div>