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 can i create a hexagon shape with an image inside? [duplicate]

    How do I centralize an ordered list?

    How to add css in post? [closed]

    How to get a gradient background for table rows with JSF and CSS?

    How to build a mobile responsive menu that will always have a 100% height and show all its list items

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    How do you design your CSS?

    How to make cards on the image

    How to select only top-level li in recursive menu?

    How to Move Bing Maps Menu to the Right side of Screen

    How can I vertically align a font-awesome input checkbox with its label?

    How to change table width using css

    Need the background to change when the mouse goes over the selected tab. How?

    css how to make the div width just for the content

    CSS: How to center a bottom-fixed menu

    How to ease the whole css animation

    How to make CSS triangles (with borders) compatible across browsers

    How to link css files to work correctly with wamp server?

    How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

    How to assign a css class or id to smileys?

    How to fill vertical spaces between tiles in a grid system (Using CSS)

    how to make html email look exactly the same as previewed just in browser?

    How to structure CSS classes? By entities or by aspects?

    Showing refresh button when animation is complete?

    jquery how to make an element comeback to initial position after animation

    How to underline list items separately with CSS?

    how to remove space in TR and TD

    How can i make it through using bootstrap grid?

    How do I specify CSS classes for specific rows in a GridView?

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)