Javascript 我如何避免CSS在悬停在区域上时闪烁？
我更新了html+，现在在地图区域上移动光标时会闪烁。我把这个问题弄得一团糟 我读到我可以改变css和html，也可以加入z值。我试过了，但在地图区域上移动光标时，它仍然闪烁。如果将光标移到左侧的区域文本上，则不会闪烁。你能告诉我怎么办吗？在我改变了很多CSS之前，我没有这个问题Javascript 我如何避免CSS在悬停在区域上时闪烁？,javascript,jquery,html,css,imagemap,Javascript,Jquery,Html,Css,Imagemap,我更新了html+，现在在地图区域上移动光标时会闪烁。我把这个问题弄得一团糟 我读到我可以改变css和html，也可以加入z值。我试过了，但在地图区域上移动光标时，它仍然闪烁。如果将光标移到左侧的区域文本上，则不会闪烁。你能告诉我怎么办吗？在我改变了很多CSS之前，我没有这个问题 <div class="column_left"> <div class="box"> <ul> <li>free.&
<div class="column_left">
<div class="box">
<ul>
<li>free.</li>
</ul>
</div>
<div id="regions">
<div class="region_links_one">
<ul class="regions_one">
<li><a id="region_8" class="region" href="http://www.koolbusiness.com/andhra_pradesh/">Andhra
Pradesh</a></li>
<li><a id="region_9" class="region" href="http://www.koolbusiness.com/arunachal_pradesh/">Arunachal
Pradesh</a></li>
<li><a id="region_10" class="region"
href="http://www.koolbusiness.com/assam/">Assam</a>
</li>
<li><a id="region_11" class="region"
href="http://www.koolbusiness.com/bihar/">Bihar</a>
</li>
<li><a id="region_12" class="region"
href="http://www.koolbusiness.com/chhattisgarh/">Chhattisgarh</a></li>
<li><a id="region_13" class="region"
href="http://www.koolbusiness.com/goa/">Goa</a></li>
<li><a id="region_14" class="region" href="http://www.koolbusiness.com/gujarat/">Gujarat</a>
</li>
<li><a id="region_15" class="region" href="http://www.koolbusiness.com/haryana/">Haryana</a>
</li>
<li><a id="region_16" class="region" href="http://www.koolbusiness.com/himachal_pradesh/">Himachal
Pradesh</a></li>
<li><a id="region_17" class="region" href="http://www.koolbusiness.com/jammu_kashmir/">Jammu
&
Kashmir</a></li>
<li><a id="region_18" class="region" href="http://www.koolbusiness.com/jharkhand/">Jharkhand</a>
</li>
<li><a id="region_19" class="region" href="http://www.koolbusiness.com/karnataka/">Karnataka</a>
</li>
<li><a id="region_20" class="region" href="http://www.koolbusiness.com/kerala/">Kerala</a>
</li>
<li><a id="region_21" class="region" href="http://www.koolbusiness.com/madhya_pradesh/">Madhya
Pradesh</a></li>
</ul>
<ul class="regions_two">
<li><a id="region_22" class="region"
href="http://www.koolbusiness.com/maharashtra/">Maharashtra</a></li>
<li><a id="region_23" class="region" href="http://www.koolbusiness.com/manipur/">Manipur</a>
</li>
<li><a id="region_24" class="region" href="http://www.koolbusiness.com/meghalaya/">Meghalaya</a>
</li>
<li><a id="region_25" class="region" href="http://www.koolbusiness.com/mizoram/">Mizoram</a>
</li>
<li><a id="region_26" class="region" href="http://www.koolbusiness.com/nagaland/">Nagaland</a>
</li>
<li><a id="region_27" class="region" href="http://www.koolbusiness.com/orissa/">Orissa</a>
</li>
<li><a id="region_28" class="region" href="http://www.koolbusiness.com/punjab/">Punjab</a>
</li>
<li><a id="region_29" class="region" href="http://www.koolbusiness.com/rajasthan/">Rajasthan</a>
</li>
<li><a id="region_30" class="region" href="http://www.koolbusiness.com/sikkim/">Sikkim</a>
</li>
<li><a id="region_31" class="region" href="http://www.koolbusiness.com/tamil_nadu/">Tamil
Nadu</a></li>
<li><a id="region_32" class="region" href="http://www.koolbusiness.com/tripura/">Tripura</a>
</li>
<li><a id="region_34" class="region"
href="http://www.koolbusiness.com/uttaranchal/">Uttaranchal</a></li>
<li><a id="region_33" class="region" href="http://www.koolbusiness.com/uttar_pradesh/">Uttar
Pradesh</a></li>
<li><a id="region_35" class="region" href="http://www.koolbusiness.com/west_bengal/">West
Bengal</a></li>
</ul>
</div>
<div class="region_links_two">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v22 -->
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="1596572194"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<h2>Union territories</h2>
<ul class="regions_one">
<li><a class="region" href="http://www.koolbusiness.com/delhi/">Delhi</a></li>
<li><a class="region" href="http://www.koolbusiness.com/lakshadweep/">Lakshadweep</a></li>
<li><a class="region" href="http://www.koolbusiness.com/daman_diu/">Daman & Diu</a>
</li>
<li><a class="region" href="http://www.koolbusiness.com/dadra_nagar_haveli/">Dadra & Nagar
Haveli</a>
</li>
</ul>
<ul class="regions_two">
<li><a class="region" href="http://www.koolbusiness.com/chandigarh/">Chandigarh</a></li>
<li><a class="region" href="http://www.koolbusiness.com/pondicherry/">Pondicherry</a></li>
<li><a class="region" href="http://www.koolbusiness.com/andaman_nicobar_islands/">Andaman &
Nicobar
Islands</a></li>
</ul>
</div>
</div>
</div>
<div id="mapcontainer">
<div class="sprite_index_in_in_map">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAOPr+AAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
id="area_highlight" alt="">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAOPr+AAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" id="area_map"
usemap="#map_map_map" alt="">
</div>
<map name="map_map_map" id="map_map_map">
<area tabindex="-1" shape="poly" id="hoverregion_8"
coords="261,310,251,322,240,333,234,337,229,340,225,343,223,347,221,352,220,356,217,356,212,356,207,356,205,358,204,361,201,365,197,364,193,364,191,365,188,369,187,376,187,381,188,384,186,389,185,394,185,398,187,402,187,405,184,403,182,406,181,408,178,408,174,409,172,410,169,412,165,412,162,412,160,415,158,418,155,420,156,414,157,410,157,405,155,401,151,398,147,397,143,397,140,399,136,399,133,398,133,393,132,388,130,384,129,380,131,377,133,375,136,375,137,374,136,370,136,365,137,362,141,362,142,359,142,354,141,350,140,344,141,339,143,337,145,334,144,330,144,325,145,321,145,317,146,315,148,309,151,305,154,300,158,297,164,297,169,298,172,299,178,300,182,299,184,299,183,305,184,310,184,313,188,315,192,317,196,321,199,324,201,327,204,330,206,331,211,330,215,328,219,327,223,327,223,322,225,318,229,318,232,320,234,322,232,316,235,314,239,313,240,310,243,307,245,310,248,312,252,313,254,313,256,310,258,308,262,308,263,308"
href="http://www.koolbusiness.com/andhra_pradesh/6" alt="Andhra Pradesh">
...
<area tabindex="-1" shape="poly" id="hoverregion_35"
coords="321,165,319,166,317,166,315,168,312,168,308,167,308,169,310,173,311,175,312,177,311,179,309,180,311,181,309,185,306,187,305,189,306,192,308,194,308,196,306,199,305,201,306,203,308,204,309,206,310,208,309,211,306,216,304,219,298,221,293,223,292,226,290,229,288,232,284,230,280,231,278,234,279,236,281,239,286,240,290,243,294,247,295,250,295,252,294,254,294,255,301,261,306,264,308,262,311,258,315,256,317,258,318,258,322,256,324,254,328,253,329,253,328,248,326,243,326,240,326,235,327,234,323,232,322,230,321,226,323,222,324,219,323,216,320,215,317,215,313,214,312,212,312,210,312,208,314,205,317,204,319,203,323,201,323,201,323,198,322,196,318,195,313,193,311,191,311,189,313,187,315,183,316,180,318,179,321,181,324,183,327,185,331,186,334,185,336,183,336,182,337,174,333,174,330,173,329,173,326,173,323,172,321,171,321,169,321,167,322,165"
href="http://www.koolbusiness.com/west_bengal/" alt="West Bengal">
<area tabindex="-1" shape="poly" id="hoverregion_36"
coords="312,60, 312,110, 410, 110, 410, 60"
href="http://www.koolbusiness.com/ai" alt="Post Ad">
</map>
<script type="text/javascript">$(document).ready(function () {
$("#regions a").add("area").mouseover(function () {
var id = this.id.substring(this.id.indexOf("_") + 1);
var regionmap = $("#hoverregion_" + id);
if (regionmap && regionmap.length > 0) {
$("#area_highlight").removeClass().addClass("sprite_index_in_in_hover_region" + id);
$("#region_" + id).css("text-decoration", "underline");
}
});
$("#regions a").add("area").mouseout(function () {
var id = this.id.substring(this.id.indexOf("_") + 1);
var regionmap = $("#hoverregion_" + id);
if (regionmap && regionmap.length > 0) {
$("#area_highlight").removeClass();
$("#region_" + id).css("text-decoration", "none");
}
});
});</script>
</div>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0px;
padding: 0px;
border: 0px;
font-size: 15px;
font: inherit;
z-index:6;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote::before, blockquote::after, q::before, q::after {
content: none;
}
a:hover .sprite_common_pagi_left_right, a:hover.sprite_common_pagi_left_right {
width: 9px;
height: 26px;
}
a:hover .sprite_common_pagi_right_left, a:hover.sprite_common_pagi_right_left {
width: 9px;
height: 26px;
}
a:hover .sprite_common_pagi_left_left, a:hover.sprite_common_pagi_left_left {
width: 9px;
height: 26px;
}
a:hover .sprite_common_pagi_right_right, a:hover.sprite_common_pagi_right_right {
width: 9px;
height: 26px;
}
a:hover .sprite_common_topbar_settings, a:hover.sprite_common_topbar_settings {
width: 35px;
height: 24px;
}
#wrapper {
position: relative;
display: block;
width: 948px;
margin: 16px auto;
text-align: left;
}
.js .topbar-dropdown a:hover {
text-decoration: underline;
color: rgb(0, 0, 0);
}
.js .topbar-dropdown a, .js .topbar-dropdown a:visited, .js .topbar-dropdown a:hover {
color: rgb(51, 51, 51);
}
html {
height: 100%;
overflow-y: scroll;
}
a {
cursor: pointer;
font-weight: bold;
text-decoration: none;
}
a:hover, a span:hover {
text-decoration: underline;
}
a:link {
color: rgb(51, 102, 153);
}
a:visited {
color: rgb(153, 51, 102);
}
.columns {
overflow: hidden;
display: block;
height: 1%;
}
.columns .widecolumn {
width: 730px;
float: left;
}
.columns aside {
width: 202px;
float: left;
margin-left: 16px;
}
.spritetext {
display: block;
overflow: hidden;
text-indent: -99999px;
}
.nohistory a, a.nohistory, a .nohistory {
color: rgb(51, 102, 153);
}
ul.bullets li::before {
position: absolute;
top: 5px;
left: 0px;
display: inline-block;
width: 6px;
height: 6px;
margin: 0px 0px 0px -16px;
background-color: rgb(204, 0, 0);
content: '';
background-position: initial initial;
background-repeat: initial initial;
}
header {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: rgb(242, 102, 59);
}
footer {
border-top-width: 3px;
border-top-style: solid;
border-top-color: rgb(242, 102, 59);
}
.main {
overflow: hidden;
display: block;
}
.column_left {
width: 420px;
}
.box {
display: block;
overflow: hidden;
background-color: rgb(255, 255, 255);
width: 320px;
padding: 16px;
margin: 2px 2px 8px;
background-position: initial initial;
background-repeat: initial initial;
}
.box h2 {
font-size: 16px;
margin-bottom: 8px;
margin-top: 0px;
}
.box ul {
padding-left: 16px;
margin: 0px;
}
.box li {
margin-bottom: 4px;
}
#regions {
float: left;
display: block;
overflow: hidden;
width: 400px;
margin-left: 4px;
}
#regions .regions_one, #regions .regions_two {
float: left;
width: 200px;
}
#regions h2 {
display: block;
clear: both;
padding: 12px 0px 4px;
margin: 0px;
font-size: 14px;
}
#regions ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#regions ul li {
display: block;
clear: both;
overflow: hidden;
margin-bottom: 0px;
}
#regions a {
line-height: 20px;
font-size: 13px;
display: block;
float: left;
}
#mapcontainer {
position: relative;
float: left;
display: block;
overflow: hidden;
z-index:2;
}
#area_map {
width: 450px;
height: 499px;
}
#map_map img {
float: left;
margin: 16px 0px 0px 32px;
}
.google_plus {
position: absolute;
right: 160px;
top: 595px;
}
.sprite_index_in2_in_map {
float: left;
width: 450px;
height: 499px;
background: url("/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26") no-repeat -2px -2px;
}
此代码错误，它会在每次指针移动时删除和添加类：
$("#area_highlight").removeClass().addClass("sprite_index_in_in_hover_region" + id);
这是关键：包含图像的div根据其子元素不断增长/收缩。当我将“悬停识别”图像移出它（因此它始终在那里，响应悬停）并将div的指针事件设置为“无”和“位置”设置为“绝对”时，它开始看起来不错：
<div class="sprite_index_in_in_map" style="pointer-events: none; position: absolute;">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAOPr+AAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" id="area_highlight" alt="">
</div>
在这里查看它的实际操作：您有5k代表-请仅显示相关的代码位（而不是数百行无用的代码），如果可以，请创建一个实例。这对任何人来说都很难看到。我在回答中写道，这是唯一一件看起来很奇怪的事情，但在这种情况下，浏览器通常只使用最后定义的值。其他一切看起来都很好。不确定这有多相关，但我看不到闪烁：你确定没有其他元素重叠吗？地图在布置热点时可能会很棘手，因为热点之间不会相互干扰。@Shomz完美！你是个英雄。希望尽快得到150（或200）份赏金（我想我必须等8小时才能赏金）。我保证23小时后给你赏金。（因为我自己不可能轻松解决这个问题。）我给你们带来了好处，因为你们坚持了这么长时间。这也是一个很好的、整洁的例子。天哪，真是一团糟。@Christina哈哈，太谢谢你了！！我今天感觉自己像个名人！：）代码仍然很混乱，不符合我的喜好，但至少它已经有了进展。我很惊讶地看到图像地图的使用，自从使用spacer.gifs以来，我一直在避免使用它们。我老了，没错！看起来像是从90年代的地下室里拿走的东西，没人敢再做。遗憾的是，看到它利用现代技术，比如画布和CSS3动画，会很有趣。
<div class="sprite_index_in_in_map" style="pointer-events: none; position: absolute;">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAOPr+AAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" id="area_highlight" alt="">
</div>