Adding a CSS Border on Hover and Removing It in jQuery

I'm attempting to add a class to a group of floated list items on hover using jQuery.

I add the class and then remove the added space from the newly-inserted border using margin:-4px so that the list items do not shift around.

That's my intention at least. it's not working. Here is a fiddle:

http://jsfiddle.net/NgXSc/1/

Note how the sibling list items shift on hover. The intended result is the very last list item where upon hovering, nothing moves.

Answers


Your margin problem is being caused because although you initially define the margin to be margin-right: 19px, you overwrite it with margin: -4px !important.

Also, there's no need to use jQuery for this - just use the :hover CSS pseudoclass.

I modified your code to produce your desired results:

HTML:

<nav id="cs-client-list">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
    </ul>
</nav><!--end cs-client-list-->

CSS:

#cs-client-list { padding: 25px; }
#cs-client-list li {
    background: yellow;
    float:left;
    margin: 0 19px 0 0;}
#cs-client-list li a {
    text-indent: -99999px;
    width: 111px;
    height: 80px;
    border: 4px solid transparent; /* use page's background color (ie #fff) if you want the border to display outside the box */
    display: block; }
#cs-client-list li a:hover { border-color: #000; }

Preview: http://jsfiddle.net/Wexcode/NgXSc/26/


margin: -4px is not a relative change to 19px. It completely replaces it.

Figuring out that padding adds 4px to both the left and right, you want to subract 8 pixels from the margin and use margin-right: 11px for the .over class. This keeps the list items in their original positions.

See the change in code here: http://jsfiddle.net/NgXSc/21/


Need Your Help

C++ error typedef cannot be overloaded

c++ visual-studio-2005 windows-xp

I have this c++ programm and for some reason it wont compile . I am using XP with VS 2005 .

Grails, infinite loop when rejectIfNoRule = true

grails

I have problem with infinite loop in Grails app when rejectIfNoRule = true

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.