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

我希望这会有所帮助..

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

2 个答案: