悬停CSS时更改元素的背景颜色

Question

I have some some HTML and CSS that's makes up a rectangle. Essentially I want to make it so when you hover over the square it changes colour. I've tried doing it already but it doesn't work.

Here is the HTML for that element:

<div id="teamspeak_box"><a href="ts3server://craft412.serveminecraft.net:9987">
                                                                                                </div>

                   <div id="teamspeak_box_2"></div>

                   <div id="teamspeak_text">
                                   <p>TEAMSPEAK<P/>
                               </div>


                   <div id="teamspeak_image"> 
                                           <img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
                                      </div>

Also here is the CSS

#teamspeak_box a:hover {background: #C62828;
                        transition: all 0.5s ease;}

#teamspeak_text {color: white;
                 bottom: 93px;
                 right: 66px;
                 position: absolute;}          

#teamspeak_image {bottom: 80px;
                  right: 104px;
                  position: absolute;}

#teamspeak_box {width: 159px;
                height: 43px;
                background: #212121;
                bottom: 82px;
                right: 76px;
                position: absolute;
                border-radius: 0px 0px 5px 5px;}

#teamspeak_box_2 {width: 43px;
                  height: 43px;
                  background:#313131;
                  bottom: 82px;
                  right: 191px;
                  position: absolute;
                  border-radius: 0px 0px 0px 5px;}

Answer 1

Change your HTML/CSS to this (if this is what you are looking)

 #teamspeak_box { display: block; width: 159px; height: 43px; background: #212121; position: absolute; top: 0; right: 76px; border-radius: 0px 0px 5px 5px; transition: all 0.5s ease; } #teamspeak_box:hover { background: #C62828; } #teamspeak_box a { display: block; height: 43px; } #teamspeak_box_2 { display: block; width: 43px; height: 43px; background:#313131; position: absolute; left: 0; top: 0; border-radius: 0px 0px 0px 5px; } #teamspeak_image { display: block; position: absolute; top: 5px; left: 5px; } #teamspeak_text { display: block; color: white; position: absolute; top: 14px; right: 10px; font-size: 16px; font-family:arial; } 

 <div id="teamspeak_box"> <a href="ts3server://craft412.serveminecraft.net:9987"> <span id="teamspeak_box_2"></span> <span id="teamspeak_text">TEAMSPEAK</span> <img id="teamspeak_image" src="//dummyimage.com/33x33" alt="TEAMSPEAK"/> </a> </div> 

Fiddle

Answer 2

this is html .....

<div class="divone">

</div>

this is css..

div.divone{
background-color:red;
}

div.divone:hover{
background-color:yellow;
}

I hope this will help..