0

我准备了我的导航栏的小提琴：

http://jsfiddle.net/88r9G/

目前，悬停底部边框比活动状态窄，我看不到如何修复它，想知道这里的大师是否可以提供一些帮助？

HTML

<!-- Forgive the messy markup - wordpress output -->
<div class="wpbook_header">
    <div id="underlinemenu" class="clearfix">
       <ul>
           <li class="page_item page-item-67 current_page_item"><a id="load-home-page" href="#">Home</a></li>
           <li class="page_item page-item-69"><a id="load-blog-list" href="#">The Blogs</a></li>
           <li class="page_item page-item-60"><a id="load-authors-page" href="#">Meet the Bloggers</a></li>
           <li class="page_item page-item-2"><a id="load-gallery" href="#">Gallery</a></li>
           <li class="page_item page-item-271"><a id="load-faqs" href="#">FAQs</a></li>
           <li class="page_item page-item-168"><a id="load-compform" href="#">Competition</a></li>                        
       </ul>
   </div>
</div>​

CSS

#underlinemenu {
    font-family: arial, helvetica;
    padding: 0;
    margin: 0;
    padding-bottom: 30px;
    font-size: 14px;
}

#underlinemenu ul {
    float: left;
    font-weight: bold;
    width: 770px;
    height: 57px;
    background-color: #242129;
    margin: -1px 0 -30px 0;
}

#underlinemenu ul li {
    display: inline;
    float: left;
    color: white;
    padding: 21px 30px 0px 8px;
}

.current_page_item {
    color: white;
    padding: 21px 10px 15px 5px !important;
    margin: 0 30px 0 3px;
    border-bottom: 5px solid white;
}

#underlinemenu ul li a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

#underlinemenu ul li a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

​</p>

另外，如果有人可以就如何将其转换为熔岩灯样式菜单（底部边框动画在悬停元素下方）提供建议，那将是惊人的，但如果没有，我可以将其保存以备后问.

4

4 回答 4

2

您当前正在将活动项目的白线应用于 li，同时将悬停项目的绿线应用于 a。因为你的 li 有填充，a 和他的父母不一样，所以底部边框没有那么宽。有几个解决方案：

  • 将边框底部的悬停效果应用于li. 请注意，您必须在不同的选择器中应用文本的颜色，因为它不会被悬停触发，li因为a不继承父级的颜色。
  • 从您的 , 中删除左右填充li，以使嵌套a具有相同的宽度。请注意，这是 imo 的最佳解决方案，否则您将在 边缘产生悬停效果li，单击不会触发链接。大链接也更好，绝对是在平板电脑和其他东西上。此外，您还必须将活动状态边界设置a为 。我更新了你的小提琴来证明我的意思：http: //jsfiddle.net/88r9G/8/

至于效果，我真的不明白你在追求什么。也许你可以尝试展示一些东西，或者确实发布一个带有详细解释的新问题......

于 2012-08-23T14:49:01.620 回答
1

我已经删除了很多我认为不必要的样式 - 请在此处查看更新的 JSFiddle。特别注意：

  • 所有的填充/边距现在都在一个元素上。
  • 我们正在更改li悬停时元素的边框，而不是a元素。

至于动画，如果你只是为现代浏览器开发，我会研究 CSS3 动画和转换，否则 JavaScript 动画可能是你最好的选择。

于 2012-08-23T14:48:03.033 回答
1

我制作了li和a作为具有绿色和蓝色背景的块元素。每个li元素占用的面积等于相应a元素占用的面积。a但是当我们悬停时，我们会改变元素的高度。

作为变体（参见演示：http: //jsfiddle.net/88r9G/7/）：

#underlinemenu {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

#underlinemenu ul {
    width: 770px;
    height: 57px;
}

#underlinemenu ul li {
    display: block;
    float: left;
    height: 57px;
    background-color: #408261;
}

#underlinemenu .current_page_item {
    background-color: white;
}

#underlinemenu .current_page_item a {
    height: 52px;
}

#underlinemenu ul li a {
    display: block;
    height: 57px;
    padding: 0px 10px 0px 10px;
    color: white;
    background-color: #242129;

}

#underlinemenu ul li a:hover {
    height: 52px;
    color: #408261;
}
​
于 2012-08-23T14:53:03.023 回答
1

使用 Css 选择器的简单答案：

#underlinemenu ul li:not(.current_page_item) a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

希望能帮助到你！

于 2012-08-23T15:18:09.457 回答