How can I avoid CSS flickering when hovering over areas?

Niklas R.

I updated my html+css and now I get flickering when moving the cursor over the map areas. I created a fiddle with the problem.

http://jsfiddle.net/niklasro/e0a4sb5g/

I read that I can either change the css and html or put in a z-value. I tried that but it's still flickering when moving the cursor over the map areas. If I move the cursor over the region text to the left it is not flickering. Can you please tell me what I can do about it? I didn't have this problem before I changed a lot of CSS.

enter image description hereenter 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;
}
Shomz

This code is wrong, it removes and adds classes on each pointer move:

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

This was the key: the div containing the images was constantly growing/shrinking based on its child elements. When I moved the "hover recognition" image out of it (so it's always there, responding to hovers) and set the div's pointer-event to none and position to absolute, it started to look good:

<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>

See it in action here: http://jsfiddle.net/p81khp4e/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How can I avoid CSS flickering when hovering over areas?

From Dev

Html/Css flickering when i hover over a button

From Dev

When using custom cursors, how can you set the I-bar cursor when hovering over text?

From Dev

Flickering effect when hovering title. Title over opacity background

From Dev

How can I modify the style when hovering over a combo's option?

From Dev

How can i make a custom made textbox appear when hovering over a button in wpf

From Dev

How can I get the blue glow when hovering over a text input field?

From Dev

In Labview how can I change the mouse pointer when hovering over one of my boolean controls?

From Dev

How to trigger div visibility when hovering over list item in CSS?

From Dev

How to change css of one class when hovering over another?

From Dev

How can I change element while hovering over another?

From Dev

How can I see the value of a variable without hovering over it in VBA?

From Dev

How can I activate the window my mouse is currently hovering over?

From Dev

How do I remove the space when hovering over a nav link?

From Dev

How can I maintain proper boundaries on CSS triangles when hovering with cursor?

From Dev

How can I maintain proper boundaries on CSS triangles when hovering with cursor?

From Dev

How to avoid flickering when calling repaint() in Java?

From Dev

How to avoid flickering when using an asynchronous binding

From Dev

Zoom in when hovering over image - CSS & HTML

From Dev

How can I stop flickering?

From Dev

how to avoid elements to resize when hovering

From Dev

How can I make text appear when hovering a picture that has already the hovering for transform?

From Dev

How can I get only the specific H3 I am hovering over to show and not all of them?

From Dev

How do I activate a CSS animation on an element by hovering over a different element?

From Dev

CSS how to select each li after the one im hovering, IF i hover over a specific child of that li

From Dev

How can I copy the hex color code of whatever pixel my mouse is hovering over?

From Dev

How can i avoid or pass over a directory that is access denied?

From Dev

How do I stop the flickering in this css animation?

From Dev

How do I remove the zoom icon that appears when hovering over image?

Related Related

  1. 1

    How can I avoid CSS flickering when hovering over areas?

  2. 2

    Html/Css flickering when i hover over a button

  3. 3

    When using custom cursors, how can you set the I-bar cursor when hovering over text?

  4. 4

    Flickering effect when hovering title. Title over opacity background

  5. 5

    How can I modify the style when hovering over a combo's option?

  6. 6

    How can i make a custom made textbox appear when hovering over a button in wpf

  7. 7

    How can I get the blue glow when hovering over a text input field?

  8. 8

    In Labview how can I change the mouse pointer when hovering over one of my boolean controls?

  9. 9

    How to trigger div visibility when hovering over list item in CSS?

  10. 10

    How to change css of one class when hovering over another?

  11. 11

    How can I change element while hovering over another?

  12. 12

    How can I see the value of a variable without hovering over it in VBA?

  13. 13

    How can I activate the window my mouse is currently hovering over?

  14. 14

    How do I remove the space when hovering over a nav link?

  15. 15

    How can I maintain proper boundaries on CSS triangles when hovering with cursor?

  16. 16

    How can I maintain proper boundaries on CSS triangles when hovering with cursor?

  17. 17

    How to avoid flickering when calling repaint() in Java?

  18. 18

    How to avoid flickering when using an asynchronous binding

  19. 19

    Zoom in when hovering over image - CSS & HTML

  20. 20

    How can I stop flickering?

  21. 21

    how to avoid elements to resize when hovering

  22. 22

    How can I make text appear when hovering a picture that has already the hovering for transform?

  23. 23

    How can I get only the specific H3 I am hovering over to show and not all of them?

  24. 24

    How do I activate a CSS animation on an element by hovering over a different element?

  25. 25

    CSS how to select each li after the one im hovering, IF i hover over a specific child of that li

  26. 26

    How can I copy the hex color code of whatever pixel my mouse is hovering over?

  27. 27

    How can i avoid or pass over a directory that is access denied?

  28. 28

    How do I stop the flickering in this css animation?

  29. 29

    How do I remove the zoom icon that appears when hovering over image?

HotTag

Archive