html - 如果鼠标悬停或处于活动状态，则创建具有更改背景的 3 DIV

Question

我正在创建一个 HTML 模块，我需要在其中显示 3 个<div>与黑色边框、白色背景和黑色字体颜色垂直对齐。每个<div>里面都有一个链接。

我想这样做：当我将鼠标移到那个 上<div>时，背景变成黑色，如果里面的链接是活动的，那么 的背景<div>是黑色的（只有<div>里面有活动的链接）。

那可能吗？我怎样才能创建这个？现在，我只有<div>结构。

Answer 1

您是否尝试过为每个 div 分配 ID？您可以尝试以下方法：

<div id="box1">
    <a href="http://www.example.com">Click Here</a>
</div>
<div id="box2">
    <a href="http://www.example.com">Click Here</a>
</div>
<div id="box3">
    <a href="http://www.example.com">Click Here</a>
</div>

造型像

#box1 {
    width:150px;
    height:150px;
    background-color:#FFF;
    border:2px solid #000;
}
#box1 a {
    color:#000;
}

如果您希望在将鼠标悬停在 div 上时更改背景，请使用：

#box1:hover {
    background-color:#000;
}
 #box1:hover a {
    color:#FFF;
}

如果您希望它在将鼠标悬停在链接上时执行此操作，请执行与我刚刚写的相同的操作，但将 #box1:hover 更改为 #box1 a:hover

希望有帮助