CODEWITHSUNDEEP
htmlcsshoverhtml-listsborder
p2or
p2or

Reputation: 339

Remove border-top in second line on hover

Is it possible to get rid of border-top property in the second line of a list item on hover?

enter image description here

<ul>
    <li><a href="#">This is a<br/>long Link</a></li>
</ul>

Starting Fiddle

By the help of @Pete and the others I ended up with this:

$('#access a').each(function() {
    $(this).contents().filter(function() {          
        return this.nodeType == 3; 
    }).wrap('<span></span>');
});

to simply wrap the <li> contents with <span> elements:

<!-- with the javascript -->
<nav id="access" role="navigation">
   <ul id="menu-primary" class="menu">
     <li class="menu-item">
      <a href="http://www.url.com"><span>Hello</span><br/><span>World</span><a/>
    </li>
  </ul>
</nav>

This makes it possible to create a hover only for the first span element of the li element:

.mainmenu ul a:hover span:first-child {border-top:1px dotted #fbf9ef;}

Pete's Fiddle

Upvotes: 0

Views: 546

Answers (4)

injectilo
injectilo

Reputation: 11

You can use the pseudo-element ::first-line.

Upvotes: 1

Michelle
Michelle

Reputation: 1844

I'm not sure I understand what you mean if inline-block isn't working for you; this worked for me:

a {
    display:inline-block;
    text-decoration:none;
    vertical-align:text-top;
}
a:hover {
    border-top:1px solid; 
    display:inline-block; 
}

http://jsfiddle.net/kK2bf/

Upvotes: 1

demonofthemist
demonofthemist

Reputation: 4199

Add your first line in <span> & use this code a:hover span{border-top:1px solid;}

Upvotes: 1

ekans
ekans

Reputation: 1714

you can separate the two line with span tag 

<ul>
    <li><a href="#"><span>This is a</span><br/><span>long Link</span></a></li>
</ul>

then make this in css : 

a:hover span:first-child {border-top:1px solid}
a:hover span:last-child {border-top:none;}

Upvotes: 1

Related Questions