Question

我更新了我的html + css，现在我将光标移到地图区域时会出现闪烁现象。我创造了一个问题的小提琴。

我读到我可以更改css和html或输入z值。我试过了，但是当光标移动到地图区域时它仍然闪烁。如果我将光标移动到左侧的区域文本上，则不会闪烁。你能告诉我我能做些什么吗？在我改变了很多CSS之前我没有遇到这个问题。

enter image description here

<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
                    &amp;
                    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 &amp; Diu</a>
                </li>
                <li><a class="region" href="http://www.koolbusiness.com/dadra_nagar_haveli/">Dadra &amp; 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 &amp;
                    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;
}

...

.sprite_index_in_in_hover_region13 {
    width: 14px;
    height: 19px;
    background: url("/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26") no-repeat -856px -164px;
}

.sprite_index_in_in_hover_region24 {
    width: 48px;
    height: 19px;
    background: url("/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26") no-repeat -885px -193px;
}

.sprite_123plate_c_tl {
    width: 8px;
    height: 10px;
    background: url("/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26") no-repeat -456px -489px;
}

.sprite_123plate_c_tr {
    width: 8px;
    height: 10px;
    background: url("/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26") no-repeat -856px -187px;
}

.sprite_123plate_c_bl {
    width: 8px;
    height: 10px;
    background: url("/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26") no-repeat -856px -201px;
}

.sprite_123plate_c_br {
    width: 8px;
    height: 10px;
    background: url("/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26") no-repeat -856px -215px;
}

.sprite_x_repeat_howtobox_top_xr {
    background: url("/img/x_repeat_in.png?74db94879a19673b25ac5e0b63625bc0e07fb844") repeat-x 0px 0px;
}

.sprite_x_repeat_bar_xr {
    background: url("/img/x_repeat_in.png?74db94879a19673b25ac5e0b63625bc0e07fb844") repeat-x 0px -10px;
}

.sprite_x_repeat_in_in_insert_ad_xr {
    background: url("/img/x_repeat_in.png?74db94879a19673b25ac5e0b63625bc0e07fb844") repeat-x 0px -10px;
}

.sprite_x_repeat_progress_xr {
    background: url("/img/x_repeat_in.png?74db94879a19673b25ac5e0b63625bc0e07fb844") repeat-x 0px -62px;
}

.sprite_x_repeat_howtobox_bottom_xr {
    background: url("/img/x_repeat_in.png?74db94879a19673b25ac5e0b63625bc0e07fb844") repeat-x 0px -62px;
}

#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 0 4px 0;
    margin: 0;
    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;
}

.sprite_index_in_in_hover_post {
    margin-left: 129px;
    margin-top: 293px;
}


.sprite_index_in_in_hover_region8 {
    margin-left: 129px;
    margin-top: 293px;
}

.sprite_index_in_in_hover_region9 {
    margin-left: 361px;
    margin-top: 121px;
}
...
.sprite_index_in_in_hover_region29 {
    margin-left: 23px;
    margin-top: 118px;
}


.sprite_index_in_in_hover_region32 {
    margin-left: 360px;
    margin-top: 211px;
}

.sprite_index_in_in_hover_region33 {
    margin-left: 142px;
    margin-top: 115px;
}

.sprite_index_in_in_hover_region34 {
    margin-left: 147px;
    margin-top: 95px;
}

.sprite_index_in_in_hover_region35 {
    margin-left: 277px;
    margin-top: 166px;
}    


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: '';
    content: none;
}


.sprite_index_in_in_map {
    z-index:3;
    width: 450px;
    height: 499px;
    clear: both;
    position: static;
    background: url(/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26) no-repeat -2px -2px;
}


.sprite_index_in_in2_map {
    float: left;

    width: 450px;
    height: 499px;
    background: url(/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26) no-repeat -2px -2px;
}

.sprite_index_in_in_en_logo {
    width: 1024px;
    height: 138px;
    background: url(/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26) no-repeat -1010px -27px;
}

#wrapper {
    position: relative;
    display: block;
    width: 948px;
    margin: 16px auto;
    text-align: left;
}

header {
    display: block;
    height: 141px;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

header h1 {
    margin: 0;
}

.js .ie6 .topbar-dropdown {
    width: 160px;
}

.js .topbar-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 1000;
    margin: 2px 0 0;
    list-style: none;
    background: #FFF;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    -khtml-border-radius: 6px;
}

.js .topbar-dropdown li {
    margin: 0;
}

.js .topbar-dropdown a {
    display: block;
    overflow: hidden;
    padding: 9px 17px;
    line-height: 20px;
    color: #333;
    text-align: center;
    white-space: nowrap;
    height: 20px;
    float: none;
    text-shadow: none;
    border: none;
}

.js .topbar-dropdown a:hover {
    text-decoration: underline;
    color: #000;
}

.js .topbar-dropdown a span, .js .topbar-dropdown a i {
    float: left;
}

.js .topbar-dropdown .topbar-dropdown i {
    margin: 10px 10px 0 0;
}

.js .topbar-dropdown .topbar-settings {
    border-right: none;
}

.js .topbar-dropdown .sprite_common_topbar_dropdown-settings, .js .topbar-dropdown .sprite_common_topbar_dropdown-logout {
    margin: 3px 6px 0 0;
}

.js .topbar-dropdown .topbar-logout {
    padding-right: 30px;
    border-left: none;
}

.js .sprite_common_topbar_dropdown-arrow {
    float: right;
    margin: 7px 0 0 6px;
}

.js .sprite_common_topbar_logged-in, .js .sprite_common_topbar_log-in, .js .sprite_common_topbar_settings, .js .sprite_common_topbar_settings_active {
    float: right;
    margin: 6px 6px 0 0;
}

.js .sprite_common_topbar_logged-in {
    margin: 6px 6px 0 0;
}

.js .topbar-float_left {
    float: left;
}

.js .topbar-dropdown a, .js .topbar-dropdown a:visited, .js .topbar-dropdown a:hover {
    color: #333;
}

.js .topbar-dropdown-button {
    width: 41px;
}

html {
    height: 100%;
    overflow-y: scroll;
}
@font-face {
    font-family: "myfont";
    src: url("/_/css/ITCAvantGardePro-Bk.woff") format('woff');
}
body {
    background: #FFFFFF;
    font-family: 'myfont', sans-serif;
    font-size: 15px;
    line-height: 16px;
    color: #000;
    height: 100%;
    text-align: center;
}

a {
    cursor: hand;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

a:hover, a span:hover {
    text-decoration: underline;
}

a:link {
    color: #000000;
}

a:visited {
    color: #936;
}

strong {
    font-weight: 700;
}

p {
    margin: 12px 0;
}

p.first {
    margin-top: 0;
}

p.last {
    margin-bottom: 0;
}

ul, ol {
    margin: 12px 0;
    padding-left: 32px;
}

ul {
    list-style-type: disc;
}

li {
    margin-bottom: 8px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin: 4px 0;
}

h1 {
    font-size: 183.300003%;
    line-height: 30px;
}

h2 {
    font-size: 150%;
    line-height: 22px;
}

i {
    display: block;
    float: left;
    overflow: hidden;
    font-style: normal;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



.button:hover {
    background-color: #f4f4f4;
    background-repeat: repeat-x;
    background-image: 0 to(#f4f4f4));
    background-image: 0;
    background-image: 0;
    background-image: 0 color-stop(100%, #f4f4f4));
    background-image: 0;
    background-image: 0;
    background-image: linear-gradient(top, #e5e5e5, #f4f4f4);
    text-decoration: none;
}

.button:active {
    background: #e0e0e0;
}





input[type=button]:active, input[type=submit]:active, button:active {
    background: #e0e0e0;
}

label.small {
    width: 90px;
}

label.large {
    width: 170px;
}

label.radio {
    margin-left: 2px;
    display: inline-block;
}

.columns {
    overflow: hidden;
    display: block;
    height: 1%;
}

.columns .widecolumn {
    width: 730px;
    float: left;
}

.columns aside {
    width: 202px;
    float: left;
    margin-left: 16px;
}

.visible {
    display: block !important;
}

.hidden {
    display: none !important;
}





ul.bullets li:before {
    position: absolute;
    top: 5px;
    left: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 -16px;
    background: #c00;
    content: "";
}





.topbar-inner a {
}

header {
    border-bottom: 3px solid #000000;
}


.main {
    overflow: hidden;
    display: block;
}

.column_left {
      float: left;
}

.box {
    display: block;
    overflow: hidden;
    background: #ffc801;
    padding: 10px;
    margin: 8px 0px 8px;
    font-weight: 300;
}

.box h2 {
    font-size: 16px;
    margin-bottom: 8px;
    margin-top: 0;
}

.box ul {
    padding-left: 16px;
    margin: 0;
}

.box li {
    margin-bottom: 16px;
}

#regions {
    float: left;
    z-index:5;
    display: block;
    overflow: hidden;
    width: 400px;
    font-size: 19px;
    margin-left: 4px;
    font-weight: 500; /* medium */
}

#regions .regions_one, #regions .regions_two {
    float: left;
    width: 200px;
}

#regions h2 {
    display: block;
    clear: both;
    padding: 12px 0 4px;
    margin: 0;
    font-size: 14px;
}

#regions ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#regions ul li {
    display: block;
    clear: both;
    overflow: hidden;
    margin-bottom: 0;
}

#regions a {
    line-height: 20px;
    font-size: 18px;
    display: block;
    float: left;
    font-weight: 500; /* medium */
}

#mapcontainer {
     margin: 16px 0 0 32px;
    position: relative;
}

#area_map {
    width: 450px;
    height: 499px;
}

#map_map img #map_map_map .map_map_map{
      float: left;
    margin: 16px 0px 0px 32px;
    z-index:91;
}

Answer 1

此代码错误，它会删除每个指针移动并添加类：

$("#area_highlight").removeClass().addClass("sprite_index_in_in_hover_region" + id);

这是关键：包含图像的div基于其子元素不断增长/缩小。当我移动＆＃34;悬停识别＆＃34;图像从中出来（所以它总是在那里，响应悬停）并将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>

在此处查看此行动：http://jsfiddle.net/p81khp4e/

将鼠标悬停在区域上时，如何避免CSS闪烁？

1 个答案: