How do I stop extra spacing on jquery hover?

Question

When I hover on certain images via hover, the formatting includes additional spacing at the bottom. http://jsfiddle.net/44jQa/72/. This is happening in the first two images. Additionally, when the content appears on the hover, sometimes old content remains. This happens when the hover is fast and the old content doesn't fade out. How do I fix these issues?

Here is my js:

function showPart(id) {
    $('#content .part' + id).fadeIn('400').addClass('show');
}
$('li').on('mouseenter', function () {
    $(this).find('img').fadeTo(400, 1);
    $(this).find('img').addClass("LHover");
    var id = $(this).data('id');
    if ($('.show').length == 0) {
        showPart(id);
    } else {
        $('.show').removeClass('show').fadeOut('100', function () {
            showPart(id);
        });
    }
}).on('mouseleave', function () {
    $(this).find('img').fadeTo(400, '.5');
    $(this).find('img').removeClass("LHover");
});

Answer 1

problem 1: the jump
Though all the other answers are valid (the border is obviously guilty), I thought I would offer another solution, that is imo easier and better cross browser (outline and shadow are not that well supported, border is). Just removing the border is not a valid option I think, as it is part of the design. Strange that got accepted as an answer (it is an explaination, not a solution).

What I would do is add the border on the image by default, but set the color to transparent. You could then just change the border color upon hover. Something like this:

.lrow > img {
     border: 1px solid transparent;
    ...        
}
.lrow > img.LHover {
    border-color: #000;
}

To see the code in action: http://jsfiddle.net/Pevara/44jQa/80/

problem 2: the fade
Rather then working with javascript to achieve this, I would go for a full css solution. I agree that not all browsers support this yet, but it would degrade gracefully, and one could argument that not all users have js enabled, and then it would not degrade at all, but simply fail. And the css solution will not cause any problems when moving fast...

What I changed:

• restructured the html to be more semanticly correct IMO Put the description in the list, alongside the information of the person. This way a screenreader or crawler will be able to make sense of your page as well
• renamed some classes. Not really nessacary but it makes your css a lot easier to read (especially after a year), and while i was at it...
• removed the data-id as it is no longer required
• added css transition to get the .photo fade effect
• added css transition to get the .description fade effect

The HTML now looks something like this:

<div id="tabs">
    <ul class='clearfix'>
        <li class="person">
            <img class='photo' src="http://unclesmiley.files.wordpress.com/2010/01/smiley1.jpg" alt="Smiley face" height="42" width="42" />
            <p class="name">A</p>
            <p class='title'>Co-Director</p>
            <p class='description'>1 Lorem ipsum</p>
        </li>
        ...
    </ul>
</div>

And the css:

#tabs ul {
    position: relative; /* to act as reference for the .description */
}
.description {
    opacity: 0; /* we use opacity to hide, because we want to be able to fade */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    transition: opacity .4s; /* we want to fade opacity on hover */
}
.person {
    float: left;
    width: 135px;
}
.photo {
    opacity: .5;
    border: 1px solid transparent;
    transition: opacity .4s, border-color .6s; /* we want to fade opacity and bordr */
}
.person:hover .photo {
    border-color: #000;
    opacity: 1;
}
.person:hover .description {
    opacity: 1;
}

(For the clearfix class I suggest you check Google if you don't understand, plenty of info out there)

A working example can be found here: http://jsfiddle.net/Pevara/44jQa/81/

update
To preserve the state, you would need some javascript. I would simple to it by adding a class to the hovered person, and removing it when another person receives the hover.

You would just have to add a few extra selectors to the :hover styles. Everywhere you see .person:hover [something] you would ad an extra selector like so .person.active [something], separated by a comma.

The javascript would become really simple and look something like this:

$('#tabs .person').hover(function() {
    // remove the previous active
    $('#tabs .person.active').removeClass('active');
    // add the active class to the current
    $(this).addClass('active');
});

That is all there is to it.

I updated my fiddle: http://jsfiddle.net/Pevara/44jQa/115/

Answer 2

Use outline:

http://jsfiddle.net/44jQa/74/

.LHover {
    outline: 1px solid #000;
}

Answer 3

your issue is with

.LHover {
    border: 1px solid #000;
}

Since you are adding a 1px border on every side of the image this is increasing it's bounds by 1px every way thus causing the other images to shift and cause your issue.

If you remove the border then this does not happen. Try implementing a drop shadow instead, this does not cause any movements.

Answer 4

This is caused by border. Adding border on hover causes height to increase a bit and shift blocks in the second row to the right.

Demo

.LHover {
    border: 1px solid #000;
}