我正在尋找一種解決懸停問題的方法。<div class="section"><div class="image"><img src="myImage.jpg" /></div><div class="layer">Lorem Ipsum</div></div>現在，圖像和圖層這兩個類都有邊框。兩者的正常和懸停都有不同的顏色。有辦法做到這一點，所以如果我將圖層類懸停，則圖層和圖像類的懸停邊框顏色都處于活動狀態？反之亦然？
3 回答
30秒到達戰場
TA貢獻1828條經驗 獲得超6個贊
您不需要JavaScript。
一些CSS可以做到。這是一個例子：
<html>
<style type="text/css">
.section { background:#ccc; }
.layer { background:#ddd; }
.section:hover img { border:2px solid #333; }
.section:hover .layer { border:2px solid #F90; }
</style>
</head>
<body>
<div class="section">
<img src="myImage.jpg" />
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>
ABOUTYOU
TA貢獻1812條經驗 獲得超5個贊
我認為最好的選擇是將兩個div都用另一個div括起來。然后，您可以通過CSS通過以下方式進行制作：
<html>
<head>
<style>
div.both:hover .image { border: 1px solid blue }
div.both:hover .layer { border: 1px solid blue }
</style>
</head>
<body>
<div class="section">
<div class="both">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</div>
</body>
</html>
- 3 回答
- 0 關注
- 639 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消