Изменить цвет фона элемента при наведении css

Question

У меня есть некоторые HTML и CSS, которые составляют прямоугольник. По сути, я хочу это сделать, когда вы наводите курсор на квадрат, он меняет цвет. Я уже пытался это сделать, но это не сработает.

Вот HTML для этого элемента:

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

Кроме того, здесь есть 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

Измените свой HTML/CSS для этого (если это то, что вы ищете)

#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

это HTML .....

<div class="divone"> 

</div> 

это CSS ..

div.divone{ 
background-color:red; 
} 

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

Я надеюсь, что это поможет ..