有人可以帮我处理悬停标签吗？
我试图使这行代码悬停，但它没有悬停在我希望它悬停的位置。它悬停在同一条线上。这是我的 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 的命令，我不明白为什么。
MM们浏览 124回答 4
4回答
-
沧海一幻觉
我编辑了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> -
眼眸繁星
尝试这个答案，如果这不起作用，请分享您的完整代码：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> -
杨魅力
请尝试此代码，将鼠标悬停在包含内容上：<!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>我希望上面的代码对您有用。 -
杨__羊羊
您的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>
随时随地看视频慕课网APP
相关分类
Html5