Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ryan Atkins
Ryan Atkins
8,635 Points

Using Z-Index to fit(visually) a div between <li><a>?

So I'm trying to make a navbar from scratch. I've made a <div> the size of the <a> elements in my bar and have used JQuery/JS to move it to those anchor positions when hovered. My problem is the div covers the text from the anchors. Is there a way to push that text above the div with z-index? I've played with it a bit and can only get the div on top of the links or below the black navbar.

<div class="nav-bar">
    <ul>
        <li><a href="index.html">Link 1</a></li>
        <li><a href="index.html">Link 2</a></li>
        <li><a href="index.html">Link 3</a></li>
        <li><a href="index.html">Link 4</a></li>
        <li><a href="index.html">Link 5</a></li>
        <div id="selectedDiv"></div>
    </ul>
</div>

.nav-bar {
    height: 40px;
    width: 100%;
    background-color: #191919;
    display: block;
    list-style-type: none;
    text-align: center;
}

.nav-bar ul {
    font-family: 'Expletus Sans', cursive;
    height: 100%;
    font-size: 0;
}

.nav-bar li {
    font-size: 2rem;
    height: inherit;
    display: inline-block;
}

.nav-bar a {
    width: 10rem;
    color: white;
    vertical-align: middle;
    height: inherit;
    display: block;
    margin: auto;
}

#selectedDiv {
    width: 10rem;
    height: 40px;
    position: relative;
    background-color: #282828;
    left: 0px;
    top: -40px;
}
Chyno Deluxe
Chyno Deluxe
16,936 Points

are you trying to use jQuery to move 'selected-div' between li and anchor tags when hovered?

I'm a little confused as to what exactly you are trying to accomplish. Can you post your jQuery as well?

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Shot in the dark but I am assuming you are simply trying to make the anchor's background change color when hovered. If this is the case then jQuery is not necessary and can be done with pure CSS by changing #selectedDiv to .nav-bar a:hover. view below. 

.nav-bar a:hover {
    background-color: #282828;
}

Also, if this is the case then your code can be simplified by applying DRY(Don't Repeat Yourself) coding. Super Basic DRY Nav

Ryan Atkins
Ryan Atkins
8,635 Points
Ryan Atkins
Ryan Atkins
8,635 Points

I should have mentioned it, but I'm actually going to animate it to slide from 1 link to the other when I'm done. It's going to fade in when first selected. If the user targets another link in the nav, it'll slide over the div, and if not, it should fade out. Right now, I just need the div to appear under the anchor. Didn't think the JQuery would be needed. It's only built up to the point of me having this problem. 

$(".nav-bar a").mouseenter(function() {
    var $divPosition = $(this).position();
    $(".nav-bar #selectedDiv").css("left", $divPosition.left);  
});