我現在在 CSS 方面遇到了一些問題，我不知道如何修復它?；旧衔矣幸粋€引導卡，它使用 CSS 類在懸停時縮放。問題是，當鼠標懸停時，當它縮小時，<hr>我卡片中的一些內容就會消失，即使它們的 CSS 根本沒有改變。這似乎是一個瀏覽器問題，因為它在 Safari 上完美運行，但在 Chrome 上卻不行。您可以通過以下 URL 嘗試：https://lereseauglt.fr（滾動到卡片輪播上的第二張幻燈片及之后，并將鼠標懸停在卡片上）。這是 HTML：<div class="card scaleIn"> <div class="card-body"> <div class="row w-100 m-0"> <div class="col-auto">[content]</div> <div class="col">[content]</div> </div> <hr> <div class="row w-100 m-0"> <div class="col-auto">[other content]</div> <div class="col">[other content]</div> </div> </div></div>這是CSS：.scaleIn { transition:all 0.1s ease-in-out;}.scaleIn:hover { transform:scale(1.007); cursor:pointer;}hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); box-sizing: content-box; height: 0; overflow: visible;}所以我的問題是：有什么辦法可以解決這個奇怪的效果嗎？多謝。
1 回答
森欄
TA貢獻1810條經驗 獲得超5個贊
在我看來，問題的發生是由于zoom: 80%ID 元素的屬性造成的containerCours。
使用 DevTools 并注意縮放如何影響元素的邊框頂部寬度hr- 您期望它是 1px，但實際上是 0.996px。然后，將鼠標懸停在已縮放的容器內縮放卡片，看起來hr似乎丟失了，但它實際上就在那里。元素的頂部邊框太薄，以至于不可見。您可以嘗試將 的頂部邊框寬度更新hr為 1.2px，它將可見 - 再次檢查 DevTools 并注意頂部邊框寬度為 1.191px。
我建議您重構容器縮放邏輯，因為否則您將不得不使用這種不確定的浮點單位。
- 1 回答
- 0 關注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消