When I hover over a rectangle created with HTML and CSS, I want it to change color. However, my attempts at implementing this feature have been unsuccessful.
Here is the HTML code snippet:
<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>
Moreover, here is the corresponding CSS styling:
#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;}