CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Keetch
Keetch

Reputation: 75

Cannot make a hover work

I have a big problem with very simple thing. I cannot change the color of the background in divs. I am using bootstrap 3.3.7. There is my code

#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>

Can you tell me where is the problem? Thank you.

Upvotes: 1

Views: 63

Answers (3)

Senpai.D
Senpai.D

Reputation: 439

Just make backgrounds for paragraphs:

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

And please, don't use ID for styles, they are for javascript. And restrain from using !important unless you have no other option.

Upvotes: 0

Viira
Viira

Reputation: 3911

use !important to override inline styles

   #In:hover{
        background: #2E2E2F!important;
    }
   #Up:hover{
        background: aquamarine!important;
    }
    <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>

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

Because you had use background inline, but you need to can use internal CSS for hover like given below.

See below its working now:-

#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>

Upvotes: 1

Related Questions