Geek asks and answers

Moving a horizontal background line when hovering other links in the same list

Could you take a look at my jsfiddle ?

As you can see, I put a horizontal line under the anchor of the active list item.
I want the horizontal line to be at the bottom of the ** anchor, just like the bottom border when you hover over, and not where my cursor is. Can anybody help me?

Thank you for the advanced!
Regards,
Jonathan

+3
source share
3 answers

, li , ul . div , z-, mouseover.

HTML:

<div id="container">
    <ul>
        <li><a href="#">sub nav</a></li>
        <li><a href="#">sub nav</a></li>
        <li><a href="# "class="active">sub nav</a></li>
        <li><a href="#">sub nav</a></li>
    </ul>
</div>

javascript:

var animation = $('<div>').css({
    'position': 'absolute',
    'height': active.outerHeight()-1,
    'width': active.outerWidth(),
    'marginTop': (active.parent().index() * active.outerHeight()),
    'borderBottom': '1px solid #000',
    'z-index': -10
});

, border-bottom ul li a , . margin-bottom: 1px, .

+3

, , <li>, this jsfiddle .

css , jQuery:

$(document).ready(function() {
    $('ul').mouseout(function(){
        $(this).removeClass('active');
    }).

    $('ul > li').mouseenter(function(){
        $(this).addClass('active');
    });
});
0

The problem is that the animated one lihas a higher z index than other list items. And you need to remove the white border from the links.

Take a look at this script: http://jsfiddle.net/YFUsJ/12/

CSS

ul li {
    display: block;
    position:relative;
    z-index:1;
}
ul li a {
    text-decoration: none;
    height: 30px;
    line-height: 30px;
    display: block;
    padding:5px;
    color: #555;
    font-size: 1.4em;
}
0
source

More articles:


All Articles