在不更改 position 的情况下淡入和淡出内联 div？

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

You'll have to absolutely position the element that you're fading, and move your text in a bit: http://jsfiddle.net/x2SEv/1/ .

.parent {
    position: relative;
    padding-left: 40px;
}
.div-to-fade {
    display:none;
    position: absolute;
    left:0; top:0;
}

Answer 2

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