在悬停时删除第二行中的border-top

Question

是否有可能在悬停时清除列表项的第二行中的border-top属性？

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

• 显示：block 导致边框与整个元素的宽度相同
• 显示：内联块导致几乎相同的结果

Starting Fiddle

---

在@Pete和其他人的帮助下，我最终得到了这个：

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

只需使用<li>元素包装<span>内容：

<!-- 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>

这样就可以仅为li元素的第一个span元素创建一个悬停：

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

Pete's Fiddle

Answer 1

您可以使用span标记

分隔两行

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

然后在css中创建：

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

Answer 2

在<span>＆amp;中添加您的第一行使用此代码a:hover span{border-top:1px solid;}

Answer 3

我不确定如果内联块不适合你，我明白你的意思;这对我有用：

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

http://jsfiddle.net/kK2bf/

Answer 4

您可以使用伪元素::第一行。