觸發器CSS：僅在懸停在邊框上時懸停

Question

我正在創建一個矩形輪廓，在空<div>周圍有一個5px薄邊框。 當用戶將鼠標懸停在邊框上時，我希望邊框改變顏色。 這一切都運行正常，但我不希望當用戶的鼠標在<div>內時邊框保持更改，因為它不再實際在邊框上。

在這里查看示例： https ： //jsfiddle.net/qbcc1trt/

 .outer { position: relative; overflow: hidden; display: inline-block; } .myborder { content: ''; position: absolute; bottom: 5%; left: 20%; width: 40%; height: 50%; box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6); } .myborder:hover { content: ''; position: absolute; bottom: 5%; left: 20%; width: 40%; height: 50%; box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6); } 

 <div class="outer"> <img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"> <div class="myborder"></div> </div> 

有沒有辦法實現這個目標？

Answer 1

:hover事件僅適用於最頂層的元素（以及內部元素）。 因此，您可以通過使另一個div與您的myborder相同的大小但減去邊框的大小來實現此效果。 然后將它直接放在我的myborder上方。

這樣，懸停事件將在邊界上觸發（在您的情況下為框陰影）但不在內部。 請參閱下面的演示

 .outer { position: relative; overflow: hidden; display: inline-block; } .myborder { position: absolute; bottom: 5%; left: 20%; width: 40%; height: 50%; box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6); } .hover-cover { position: absolute; bottom: calc(5% + 5px); left: calc(20% + 5px); box-shadow: none; z-index: 1; width: calc( 40% - 10px); height: calc( 50% - 10px); } .myborder:hover { box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6); } 

 <div class="outer"> <img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"> <div class="hover-cover"></div> <div class="myborder"></div> </div> 

Answer 2

它與@Kevin提供的解決方案幾乎相同：
https://jsfiddle.net/qbcc1trt/1/

這個想法是把兩個元素，一個（B）放在另一個元素（A）之上，所以當用戶將:hover元素B時他實際上不會:hover元素A.
您需要確保元素B不在元素A內

 .outer { position: relative; overflow: hidden; display: inline-block; } .borderContainer { position: absolute; bottom: 5%; left: 20%; width: 40%; height: 50%; } .myborder { content: ''; box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6); width: 100%; height: 100%; } .inner { position: absolute; width: calc(100% - 5px * 2); height: calc(100% - 5px * 2); top: 5px; left: 5px; z-index: 100; } .myborder:hover { content: ''; box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6); width: 100%; height: 100%; } 

 <div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"> <div class="borderContainer"> <div class="myborder"> </div> <div class="inner"> </div> </div> </div> 

請注意我在這里使用的是父容器（根據您的解決方案，這可能更容易）。

Answer 3

我知道答案已被標記為已回答，但我找到了一個不使用calc的解決方案，而是使用nth-child而不是calc ，它具有更好的兼容性表 。

 .outer { position: relative; overflow: hidden; display: inline-block; } .myborder { content: ''; position: absolute; bottom: 5%; left: 20%; width: 40%; height: 50%; } .myborder div:nth-child(1) { box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6); position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .myborder div:nth-child(1):hover { box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6); } .myborder div:nth-child(2) { position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; } 

 <div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"> <div class="myborder"> <div></div> <div></div> </div> </div>