將鼠標懸停在子元素上時，是否可以刪除CSS懸停疊加層的一部分？

Question

我正在使用CSS Image Map Generator偽造圖像地圖。 當用戶將鼠標懸停在外部圖像上時，我希望整個圖像變暗一點，並在熱點周圍出現邊框。 當他們將鼠標懸停在某個熱點上時，我希望該熱點不會消失。 這有可能嗎？

1. 此圖像顯示了一個包含產品界面圖像的框-為了安全起見，在其中刪除了該界面（通過CSS背景圖像）。 用戶現在沒有將鼠標懸停在上面。 沒有可見的熱點，沒有圖像疊加。
2. 此圖像顯示用戶將鼠標懸停在“外部”圖像的一部分上。 圖像具有透明的覆蓋層（黑色，不透明度為45％），並且圖像地圖熱點變得可見。
3. 此圖像顯示用戶將鼠標懸停在熱點上。

當他們將鼠標懸停在熱點上時，我希望將父懸停疊加層的熱點區域刪除。 那可能嗎？ 我將接受任何可證明的解決方案。 Javascript / jQuery很好。

HTML：

<div class="map_image">
          <div class="overlay">
                <a class="map_link" id="map_link_0" href="dp"></a>
                <a class="map_link" id="map_link_1" href="a"></a>
                <a class="map_link" id="map_link_2" href="s"></a>
                <a class="map_link" id="map_link_3" href="ab"></a>
                <a class="map_link" id="map_link_4" href="ch"></a>
                <a class="map_link" id="map_link_5" href="ai"></a>
                <a class="map_link" id="map_link_6" href="al"></a>
                <a class="map_link" id="map_link_7" href="as"></a>
                <a class="map_link" id="map_link_8" href="o"></a>
                <a class="map_link" id="map_link_9" href="pc"></a>
                <a class="map_link" id="map_link_10" href="wi"></a>
                <a class="map_link" id="map_link_11" href="c"></a>
                <a class="map_link" id="map_link_12" href="pq"></a>
          </div>
</div>

CSS：

.map_image { display: block; width: 200px; height: 596px; position: relative; border: 1px solid gray; }

.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; border: 2px solid orange; }

.map_image #map_link_0 { top: 106px; left: 20px; }
.map_image #map_link_1 { top: 106px; left: 79px; }
.map_image #map_link_2 { top: 106px; left: 138px; }
.map_image #map_link_3 { top: 160px; left: 20px; }
.map_image #map_link_4 { top: 160px; left: 79px; }
.map_image #map_link_5 { top: 160px; left: 138px; }
.map_image #map_link_6 { width: 30px; height: 27px; top: 0px; right: 0px; }
.map_image #map_link_7 { width: 196px; height: 27px; top: 33px; left: 0px; }
.map_image #map_link_8 { bottom: 2px; left: 6px; }
.map_image #map_link_9 { bottom: 2px; left: 43px; }
.map_image #map_link_10 { bottom: 2px; left: 80px; }
.map_image #map_link_11 { bottom: 2px; left: 117px; }
.map_image #map_link_12 { bottom: 2px; left: 155px; }

#map_link_8, #map_link_9, #map_link_10, #map_link_11, #map_link_12 { height: 30px; width: 30px;}

#map_link_0, #map_link_1, #map_link_2, #map_link_3, #map_link_4, #map_link_5 { width: 37px; height: 37px; border-radius: 5px; }

.overlay {  background:rgba(0,0,0,.45); width: 200px; height: 596px; opacity:0; -webkit-transition: opacity .25s ease; -moz-transition: opacity .25s ease;}

.map_image:hover .overlay { opacity:1; }

Answer 1

CBroe的評論是解決問題的方法。 在鏈接元素上懸停時，將背景設置為原始圖像，並放置在適當位置以顯示鏈接區域后面的原始位置（考慮邊框大小）。

這是一個帶有結果的JSFiddle （顯然，發布Codepen是一個nono）。

 .map_image { display: block; width: 200px; height: 596px; position: relative; background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') top left no-repeat; border: 1px solid gray; } .map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; border: 2px solid orange; } .map_image #map_link_0 { top: 106px; left: 20px; } .map_image #map_link_1 { top: 106px; left: 79px; } .map_image #map_link_2 { top: 106px; left: 138px; } .map_image #map_link_3 { top: 160px; left: 20px; } .map_image #map_link_4 { top: 160px; left: 79px; } .map_image #map_link_5 { top: 160px; left: 138px; } .map_image #map_link_6 { width: 30px; height: 27px; top: 0px; right: 0px; } .map_image #map_link_7 { width: 196px; height: 27px; top: 33px; left: 0px; } .map_image #map_link_8 { bottom: 2px; left: 6px; } .map_image #map_link_9 { bottom: 2px; left: 43px; } .map_image #map_link_10 { bottom: 2px; left: 80px; } .map_image #map_link_11 { bottom: 2px; left: 117px; } .map_image #map_link_12 { bottom: 2px; left: 155px; } #map_link_8, #map_link_9, #map_link_10, #map_link_11, #map_link_12 { height: 30px; width: 30px; } #map_link_0, #map_link_1, #map_link_2, #map_link_3, #map_link_4, #map_link_5 { width: 37px; height: 37px; border-radius: 5px; } .overlay { background:rgba(0, 0, 0, .45); width: 200px; height: 596px; opacity:0; -webkit-transition: opacity .25s ease; -moz-transition: all .25s ease; } .map_image:hover .overlay { opacity:1; } #map_link_0:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -22px -108px, top left no-repeat; } #map_link_1:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -81px -108px, top left no-repeat; } #map_link_2:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -140px -108px, top left no-repeat; } #map_link_3:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -22px -162px, top left no-repeat; } #map_link_4:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -81px -162px, top left no-repeat; } #map_link_5:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -140px -162px, top left no-repeat; } 

 <h1>Interface</h1> <p>Hover over the image below for cool stuff.</p> <div class="map_image"> <div class="overlay"> <a class="map_link" id="map_link_0" href="pd"></a> <a class="map_link" id="map_link_1" href="a"></a> <a class="map_link" id="map_link_2" href="s"></a> <a class="map_link" id="map_link_3" href="ab"></a> <a class="map_link" id="map_link_4" href="ch"></a> <a class="map_link" id="map_link_5" href="ai"></a> <a class="map_link" id="map_link_6" href="al"></a> <a class="map_link" id="map_link_7" href="as"></a> <a class="map_link" id="map_link_8" href="o"></a> <a class="map_link" id="map_link_9" href="pc"></a> <a class="map_link" id="map_link_10" href="wi"></a> <a class="map_link" id="map_link_11" href="c"></a> <a class="map_link" id="map_link_12" href="pq"></a> </div> </div> 

Answer 2

因此，如果我理解您的問題，您希望在用戶將鼠標懸停在特定元素上時刪除橙色邊框嗎？ 如果是這樣，您可以通過更新CSS來做到這一點：

.map_image .map_link:hover {
     border: 2px solid transparent;
}

hover啟動后，邊框仍將為2px並且不可見。

Answer 3

嘗試

$(".overlay .map_link")
.on({
    mouseover: function(e) {      
        $(this).css("background-color", "#fff")
    }
  , mouseleave:function(e) {
        $(this).css("background","transparent")
    }
})

jsfiddle http://jsfiddle.net/05q8zLsr/3/

 $(".overlay .map_link") .on({ mouseover: function(e) { $(this).css("background-color", "#fff") } , mouseleave:function(e) { $(this).css("background","transparent") } }) 

 .map_image { display: block; width: 200px; height: 596px; position: relative; border: 1px solid gray; } .map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; border: 2px solid orange; } .map_image #map_link_0 { top: 106px; left: 20px; } .map_image #map_link_1 { top: 106px; left: 79px; } .map_image #map_link_2 { top: 106px; left: 138px; } .map_image #map_link_3 { top: 160px; left: 20px; } .map_image #map_link_4 { top: 160px; left: 79px; } .map_image #map_link_5 { top: 160px; left: 138px; } .map_image #map_link_6 { width: 30px; height: 27px; top: 0px; right: 0px; } .map_image #map_link_7 { width: 196px; height: 27px; top: 33px; left: 0px; } .map_image #map_link_8 { bottom: 2px; left: 6px; } .map_image #map_link_9 { bottom: 2px; left: 43px; } .map_image #map_link_10 { bottom: 2px; left: 80px; } .map_image #map_link_11 { bottom: 2px; left: 117px; } .map_image #map_link_12 { bottom: 2px; left: 155px; } #map_link_8, #map_link_9, #map_link_10, #map_link_11, #map_link_12 { height: 30px; width: 30px;} #map_link_0, #map_link_1, #map_link_2, #map_link_3, #map_link_4, #map_link_5 { width: 37px; height: 37px; border-radius: 5px; } .overlay { background:rgba(0,0,0,.45); width: 200px; height: 596px; opacity:0; -webkit-transition: opacity .25s ease; -moz-transition: opacity .25s ease;} .map_image:hover .overlay { opacity:1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Interface</h1> <p>Hover over the image below for stuff.</p> <div class="map_image"> <div class="overlay"> <a class="map_link" id="map_link_0" href="dp"></a> <a class="map_link" id="map_link_1" href="a"></a> <a class="map_link" id="map_link_2" href="s"></a> <a class="map_link" id="map_link_3" href="ab"></a> <a class="map_link" id="map_link_4" href="ch"></a> <a class="map_link" id="map_link_5" href="ai"></a> <a class="map_link" id="map_link_6" href="al"></a> <a class="map_link" id="map_link_7" href="as"></a> <a class="map_link" id="map_link_8" href="o"></a> <a class="map_link" id="map_link_9" href="pc"></a> <a class="map_link" id="map_link_10" href="wi"></a> <a class="map_link" id="map_link_11" href="c"></a> <a class="map_link" id="map_link_12" href="pq"></a> </div> </div>