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：将鼠标悬停在＃box1 a：hover

希望有所帮助

如果鼠标悬停或活动，则创建具有更改背景的3 DIV

1 个答案: