html - Why is it flickering on hover? -


i have encountered problem. have made hover transition. when mouse moving on image flickers between hovered , unhovered state. when mouse still on image works how should. can find problem please?

html

    <div class="belowcont">          <div class="circles">          <img class="circleimg" src="circle1.jpg"/>          <p class="circletext"> multi award winning film </p>          </div>          <div class="circles">          <img class="circleimg" src="circle2.jpg" />          <p class="circletext"> story of shanes life </p>          </div>          <div class="circles">          <img class="circleimg" src="circle3.jpg"/>          <p class="circletext">set in east midlands </p>          </div>     </div>

css

.belowcont {            width:100%;            height:200px;            border:1px dashed black;            margin-top:2px            }  .circles {          width:180px;          height:180px;          background:url(circles.png);          background-size:100% ;          background-image:no-repeat;;          border-radius:50%;          margin-left:120px;          margin-top:10px;          float:left;          margin-left:120px;          margin-top:10px;          float:left;          }  .circleimg {            width:180px;            height:180px;            border-radius:50%;             }  .circleimg:hover {            width:180px;            height:180px;            border-radius:50%;            position:absolute;            z-index:-100;            transition:all 1s linear;             }        .circleimg:hover ~ .circletext{            visibility:visible;             }         .circletext {              color:white;              width:160px;              text-align:center;              margin:80px auto;               visibility:hidden;}

i'm unsure why it's doing that, can offer different solution have never experienced problem.

instead of using visibility: visible try setting default text class to:opacity: 0.

then on hover:

opacity: 1; transition: opacity 1s;

i've taken out bits of code aren't of use , absolutely positioned text within image.

it seems better. have fiddle positioning , you'll go. (pun intended 'fiddle about')

http://jsfiddle.net/fjgu0s4q/1/

edit: after little more thinking why flickered, seems method of moving text on image on hover. when you're hovering on image check (pseudo code)

if mouse move == true     if hovering on element     // specified task    end if end if

so if move 1 pixel has check again, , again, has move text default state on move. since method wasn't organic way of doing it, seems why flickered. moving text , down checking state of mouse positioning.


Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more