Question

The question might be a little bit confusing.

I have an inline div and the first one is meant to be a close/delete button. I’m trying to fadeIn the close button on hover, although when it’s faded out the rest div’s move to the left.

How would you prevent this?

Here is a fiddle: http://jsfiddle.net/x2SEv/

Hover on top of ‘Some text goes here’

Answer 1

jQuery functions .show() and .hide(), use the CSS attribute display.

When attribute display is set to none, the space filled by HTML element which is hidden is remove. So your second div move to left.

You have to use the CSS attribute visibility. It does the same thing that display, but it keeps the space filled by HTML.

Let’s try :

In your JS :

$(".todo").mouseover(function() {
        $('.closebtn').css("visibility", "visible");
    });
    $(".todo").mouseout(function() {
        $('.closebtn').css("visibility", "hidden");
    });

And your CSS :

.closebtn, .actions{visibility:hidden;}