Q
圖像懸停邊框
0
A
回答
1
邊框總是在元素外......沒有「插入邊界「 選項。
另一種方法是插入框陰影。
div {
display: inline-block;
width: 200px;
height: 200px;
background-image: url(http://lorempixel.com/output/food-q-c-200-200-3.jpg);
border-radius:16px;
box-shadow: inset 0 0 0 15px rgba(255,255,255,0.5);
transition:box-shadow 0.5s ease;
}
div:hover {
box-shadow: inset 0 0 0 15px rgba(0,0,155,1);
}
<div>
</div>
編輯:
內半徑選項需要另一個元素。在這個例子中,我使用了一個僞元素。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: inline-block;
width: 200px;
height: 200px;
background-image: url(http://lorempixel.com/output/food-q-c-200-200-3.jpg);
border-radius:16px;
position: relative;
overflow: hidden;
}
div::after {
content: '';
position: absolute;
border-radius:16px;
top:12px;
left: 12px;
height: calc(100% - 25px);
width: calc(100% - 25px);
z-index: 1;
background: transparent;
box-shadow: 0 0 0 32px rgba(255,255,255,0.8);
}
div:hover:after {
box-shadow: 0 0 0 24px rgba(0,0,155,1);
}
<div></div>
0
用默認顏色設置邊框。然後IMG:懸停{} ---
<div>
<img src="http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg">
</div>
CSS
img{border:10px solid rgba(0,0,0,0.8);border-radius:8px;}
img:hover{border:10px solid blue;}
檢查Demo
相關問題
- 1. CSS a:懸停圖像邊框
- 2. Posterous Theming圖像懸停框
- 3. 如何在平移/懸停邊框/框中對齊圖像?
- 4. 防止懸停邊框
- 5. 懸停圖像
- 6. 懸停圖像
- 7. 邊框懸停和裁剪元素內的圖像
- 8. 在懸停時製作圖像紅色的邊框
- 9. 如何在懸停的圖像上添加邊框?
- 10. 圖像(圖像懸停)
- 11. 懸停在圖像上顯示圖像旁邊的文本
- 12. 懸停顯示圖像的文本框
- 13. 將鼠標懸停在網頁框架上的邊框圖像預覽
- 14. 帶有懸停邊框的標誌
- 15. PIE上懸停邊框添加
- 16. 懸停效果div位置和邊框
- 17. 在鼠標懸停上添加邊框
- 18. 在Dreamweaver中創建懸停邊框
- 19. 懸停時覆蓋父級邊框
- 20. CSS邊框和:懸停動態僞類
- 21. 在懸停如何更改div邊框
- 22. 與CSS的邊框懸停效果
- 23. 懸停的Chrome邊框半徑錯誤
- 24. 在懸停時更改邊框寬度
- 25. 懸停的jquery動畫邊框
- 26. 懸停時的邊框顏色變化
- 27. 懸停的CSS伸縮邊框動畫
- 28. 懸停時CSS邊框消失
- 29. 圓形邊框與間距懸停
- 30. 行邊框頂部邊框底部懸停單行?
看到你的代碼可能會有所幫助。 – j08691
可能的重複 - http://stackoverflow.com/questions/8452739/css-inset-borders –