悬停在子元素上时是否可以删除 CSS 悬停覆盖的一部分?
Is it possible to remove a portion of a CSS hover overlay when hovering over a child element?
我正在使用 CSS Image Map Generator 伪造图像映射。当用户将鼠标悬停在外部图像上时,我希望整个图像变暗一点并在热点周围出现边框。当他们将鼠标悬停在热点上时,我希望该热点不暗。这可能吗?
- 此图片显示了一个包含产品界面图像的盒子 - 出于安全目的将其移除 - 在其中(通过 CSS background-image)。用户现在没有将鼠标悬停在它上面。无可见热点,无图像叠加。
- 此图片显示用户将鼠标悬停在 "outer" 图片的一部分上。图像应用了透明叠加层(黑色,45% 不透明度)并且图像贴图热点变得可见。
- 此图片显示用户将鼠标悬停在热点上。
当他们将鼠标悬停在热点上时,我希望删除父悬停覆盖的热点区域。那可能吗?我会接受任何可证明的解决方案。 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; }
所以,如果我理解你的问题,你希望在用户将鼠标悬停在特定元素上时移除橙色边框吗?如果是这样,您可以像这样更新 CSS 来做到这一点:
.map_image .map_link:hover {
border: 2px solid transparent;
}
一旦 hover
启动,边框仍将 2px
并且不可见。
尝试
$(".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>
CBroe 的评论是关键所在。将鼠标悬停在 link 元素上时,将背景设置为原始图像,并充分定位以显示 link 区域后面的原始位置(考虑到边框大小)。
这是一个 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>
我正在使用 CSS Image Map Generator 伪造图像映射。当用户将鼠标悬停在外部图像上时,我希望整个图像变暗一点并在热点周围出现边框。当他们将鼠标悬停在热点上时,我希望该热点不暗。这可能吗?
- 此图片显示了一个包含产品界面图像的盒子 - 出于安全目的将其移除 - 在其中(通过 CSS background-image)。用户现在没有将鼠标悬停在它上面。无可见热点,无图像叠加。
- 此图片显示用户将鼠标悬停在 "outer" 图片的一部分上。图像应用了透明叠加层(黑色,45% 不透明度)并且图像贴图热点变得可见。
- 此图片显示用户将鼠标悬停在热点上。
当他们将鼠标悬停在热点上时,我希望删除父悬停覆盖的热点区域。那可能吗?我会接受任何可证明的解决方案。 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; }
所以,如果我理解你的问题,你希望在用户将鼠标悬停在特定元素上时移除橙色边框吗?如果是这样,您可以像这样更新 CSS 来做到这一点:
.map_image .map_link:hover {
border: 2px solid transparent;
}
一旦 hover
启动,边框仍将 2px
并且不可见。
尝试
$(".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>
CBroe 的评论是关键所在。将鼠标悬停在 link 元素上时,将背景设置为原始图像,并充分定位以显示 link 区域后面的原始位置(考虑到边框大小)。
这是一个 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>