How to remove text flicker in CSS?


Tags: javascript,css,html,text,hover

Problem :

I am creating a div, with some text inside it which fades in, when you hover your cursor on the div (through javascript and css). But when you select the text and drag the cursor out, the text flickers. The text flickers on some other cases too. Here's the html with the js in the head:

<head>
<script>
$(document).ready(function(){
    $('#mainDiv').mouseover(function(){
        $('#mainText').css('opacity', '1');
        $('#mainText').css('transition','all 0.2s ease');
        $('#mainText').css('transition-delay','0.35s');
    });
    $('#mainDiv').mouseout(function(){
        $('#mainText').css('opacity', '0');
        $('#mainText').css('transition','none');
    });
});
</script>
</head>

<body>
<div id = "mainDiv">
<div id="mainText">This is the main text which is inside the Div</div>
</div>

Here's the CSS:

#mainDiv{
width:5%;
height:125px;
background-color:#930;
transition:all 0.7s;
display:inline-block;
white-space:nowrap;
box-shadow: 0px 1px 50px #000;
float:left;
color:#FFF;
}
#mainDiv:hover{
width:30%;
alignment-adjust:central;
}
#mainText{
opacity:0;
font-family:"Myriad Pro Light";
font-size:25px;
padding-top:20px;
text-shadow:0.2em 0.2em 0.5em #000;
text-align:center;
}

I think that maybe the problem is that when I hover over the text then it gets out of the div and so the text also goes transparent, which would need some little tweaks in the code (which I can't figure out). But if there's a better code for executing this program then please let me know.



Solution :

The mouseout event is fired when the mouse hovers over the child text element. Instead you should use mouseleave which is not fire when child elements are hovered:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

Try it like this instead:

$('#mainDiv').mouseleave(function(){
...

Here is a working example


    CSS Howto..

    How to set CSS class to Button control using Session value in design page

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    how to add a css style property dynamically in JSF

    How can I hide a div when content is not displayed

    CSS - How to have 100% height element inside of parent

    how to set border in firefox

    css responsive design: how to improve my page ?

    How to apply a CSS style to div AND the div nested in the div [duplicate]

    How to load a local copy of a generic CSS file when CDN is down? [duplicate]

    how to organize all js, css, php and html code?

    How to have different transistions for background-image and text in a div using CSS

    How to modify CSS to achieve three lines?

    How to overlay zoom icons over images and always keep them lined up perfectly?

    How to place the text after thumbnails at the bottom?

    How to get GWT console/development mode to generate css errors?

    How to add font awesome in CSS

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    How to select via regex all class notations in css file

    how to change properties of a parent div on hover of child div

    How to center data table header and data using in bootstrap w/o using CSS?

    How can I apply same style from element that changes in HTML to one that doesn't change in HTML?

    How to get rid of space and align two objects in one line in css/html?

    How much client-side programming is needed when doing server-side programming?

    How to make non standard shape buttons, non clickable outside of it's border

    How to make elliptical inner shadow with CSS?

    How to make more divs appear when hovering over one div?

    How to get Owl Carousel Owl-Page (dots) Responsive

    How can I check if CSS calc() is available using JavaScript?

    How can i align these div containers

    How to show divs inline. css html