我试图使这行代码悬停，但它没有悬停在我希望它悬停的位置。它悬停在同一条线上。这是我的 html 和 css 代码。CSS：.whitebox:hover{ background: #a60505; width: 150px; height: 110px;}<div class="whitebox"> <h2> <a href="partsofdw.html" <br> Different <br> Parts of the <br> Internet </a></h2></div>当我将鼠标悬停在同一行上时，它会执行代码，而不是仅执行 div 的命令，我不明白为什么。
4 回答
沧海一幻觉
TA贡献1824条经验 获得超5个赞
我编辑了OP，发现由于格式错误而丢失了div标签。
>通过使用该代码片段，我还发现标签中缺少内容a。可能是问题的一部分。
主要问题是您不应该在 上分配大小值:hover，而应该在类本身上分配大小值。请参阅下面的 CSS 代码。
但是，我建议使用display: inline-block- 调整.whitebox元素以适应其内容 - 而不是使用height和width，并调整您的边距h2以更好地控制间距。
注意：我还删除了第一个<br/>.
.whitebox {
display: inline-block;
/*
width: 150px;
height: 110px;
*/
}
.whitebox:hover {
background: #a60505;
}
.whitebox > h2 {
margin: 1rem; /* the font size of your body */
}
<div class="whitebox">
<h2> <a href="partsofdw.html"> <!-- <br> -->
Different <br>
Parts of the <br>
Internet </a></h2>
</div>
眼眸繁星
TA贡献1873条经验 获得超9个赞
尝试这个答案，如果这不起作用，请分享您的完整代码：
CSS:
.whitebox:hover{
background: #a60505;
width: 150px;
height: 110px;
}
HTML:
<div class="whitebox">
<h2> <a href="partsofdw.html" <br>
Different <br>
Parts of the <br>
Internet </a></h2>
</div>
杨魅力
TA贡献1811条经验 获得超5个赞
请尝试此代码，将鼠标悬停在包含内容上：
<!DOCTYPE html>
<html>
<head>
<style>
h2:hover{
background: #a60505;
width: 150px;
height: 110px;
}
</style>
</head>
<body>
<div>
<h2>
<a href="partsofdw.html"><br>
Different <br>
Parts of the <br>
Internet
</a>
</h2>
</div>
</body>
</html>
我希望上面的代码对您有用。
杨__羊羊
TA贡献1943条经验 获得超7个赞
您的HTML代码需要编辑。因为你没有任何whitebox类并且它有一些语法错误！我已经帮你解决了！
.whitebox:hover{
background: #a60505;
width: 150px;
height: 110px;
}
<div class="whitebox">
<h2>
<a href="partsofdw.html">
Different <br>
Parts of the <br>
Internet
</a>
</h2>
</div>
- 4 回答
- 0 关注
- 83 浏览
添加回答
举报
0/150
提交
取消