[英]Is it possible to remove a portion of a CSS hover overlay when hovering over a child element?
I am faking an image map by using CSS Image Map Generator . 我正在使用CSS Image Map Generator伪造图像地图。 When the user hovers over the outer image, I want the entire image to darken a little and have a border appear around the hot spots. 当用户将鼠标悬停在外部图像上时,我希望整个图像变暗一点,并在热点周围出现边框。 When they hover over a hotspot, I want that hotspot to be undarkened. 当他们将鼠标悬停在某个热点上时,我希望该热点不会消失。 Is this even possible? 这有可能吗?
When they hover over the hotspot, I'd like the hotspot area of the parent hover overlay to be removed. 当他们将鼠标悬停在热点上时,我希望将父悬停叠加层的热点区域删除。 Is that possible? 那可能吗? I'll accept any demonstrable solution. 我将接受任何可证明的解决方案。 Javascript/jQuery is fine. Javascript / jQuery很好。
HTML: 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: 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; }
CBroe's comment is what did the trick. CBroe的评论是解决问题的方法。 On hover of the link elements, set the background to be the original image, positioned adequately to show the original location behind the link area (accounting for border sizes). 在链接元素上悬停时,将背景设置为原始图像,并放置在适当位置以显示链接区域后面的原始位置(考虑边框大小)。
Here's a JSFiddle with the result (apparently posting Codepen is a nono). 这是一个带有结果的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>
So if I understand your question you want the orange border removed when the user hovers over the specific element? 因此,如果我理解您的问题,您希望在用户将鼠标悬停在特定元素上时删除橙色边框吗? If so you can do that by updating your CSS like this: 如果是这样,您可以通过更新CSS来做到这一点:
.map_image .map_link:hover {
border: 2px solid transparent;
}
Once the hover
is initiated the border will still be 2px
and invisible. hover
启动后,边框仍将为2px
并且不可见。
Try 尝试
$(".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/ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.