我試圖使這行代碼懸停，但它沒有懸停在我希望它懸停的位置。它懸停在同一條線上。這是我的 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條經驗 獲得超6個贊
請嘗試此代碼，將鼠標懸停在包含內容上：
<!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 關注
- 172 瀏覽
添加回答
舉報
0/150
提交
取消