CODEWITHSUNDEEP
javascriptjqueryhtmlcssdjango
Troyer
Troyer

Reputation: 93

CSS/JS - Remove Animating Link Underlines for one li element

I got this code, with an animated link underline. This ul li is automatically generated by django {% show_menu %}.

I would like the animated link to be disabled for the third li element - the img with the attached logo class.

I have been trying out different solutions like this one:

a:hover .logo::before {
  display:none;
}

but can't seem to figure it out! Please see my code, and help me (:

Upvotes: 0

Views: 257

Answers (4)

Sachin Kanungo
Sachin Kanungo

Reputation: 1064

Check your fiddle out. Your anchor link is managed to stay clickable while animation is gone.

<div id="nav">
<ul>
    <li><a class="animate" href="index.html">Menu 1</a></li>
    <li><a class="animate" href="index.html">Menu 2</a></li>
    <li><a href="#"><img src="http://pre08.deviantart.net/ae58/th/pre/f/2012/120/5/9/thundercats_1985_2011_logo_by_pencilshade-d4y2uzr.png" alt="" class="logo" /></a></li>
    <li><a class="animate" href="index.html">Menu 3</a></li>
    <li><a class="animate" href="index.html">Menu 4</a></li>
</ul>

Upvotes: 0

Steevan
Steevan

Reputation: 826

You can add span in the place of anchor tag. check with the below link.

Fiddle

 <div id="nav">
    <ul>
        <li><a href="index.html">Menu 1</a></li>
        <li><a href="index.html">Menu 2</a></li>
        <li><span><img src="http://pre08.deviantart.net/ae58/th/pre/f/2012/120/5/9/thundercats_1985_2011_logo_by_pencilshade-d4y2uzr.png" alt="" class="logo" /></span></li>
        <li><a href="index.html">Menu 3</a></li>
        <li><a href="index.html">Menu 4</a></li>
    </ul>
</div>

Upvotes: 0

Pete
Pete

Reputation: 58452

The problem is the before is on the anchor and there is no parent selector in css for the logo.

I would use the nth-child or nth-oftype selector (as you have already used nth-of-type for the width of the logo cell, I would stick with using that):

#nav > ul > li:nth-of-type(3) a:hover:before {
  visibility: hidden;
}

Updated fiddle

Just note, if you change your li structure, you will need to change your css so it isn't a very good solution if the nav is going to change a lot

Upvotes: 2

Luke Twomey
Luke Twomey

Reputation: 1285

You can add a class to the li you don't want to animate, E.G.

<li class="noUnderline><a href="#">

and then exclude it from your css rule:

#nav > ul > li:not(.noUnderline) a:hover {

}

Upvotes: 0

Related Questions