CSS导航栏悬停问题

Posted 2023-03-06

【中文标题】CSS导航栏悬停问题

【英文标题】：CSS navigation bar hover issue

【发布时间】：2017-06-11 08:01:14

【问题描述】：

我正在开发一个具有居中水平导航栏的网站。该条的端部必须具有圆角以及悬停效果。所有这一切都是可行的，但问题是导航栏的悬停超出了栏的实际大小。除此之外，每个元素之间都有轻微的空白。正如您在下面的jsfiddle 中看到的那样，它看起来不太正确。另一个重要的注意事项是导航栏必须与 Bootstrap 和响应功能一起使用。这意味着没有任何东西可以定位绝对或浮动等。在下面我还附上了 html 和 css 代码。

HTML

<div class="navTopRight">
 <ul class="naviTop">
 <li class="first"><a href="index.html">Home</a></li>
 <li><a href="#scrollToBot">Item1</a></li>
 <li><a href="Item2.html">Item2</a></li>
 <li><a href="Item3.html">Item3</a></li>
 <li class="last"><a href="Item4.html">Item4</a></li>
 </ul>
 </div>

CSS

.navTopRight
    text-align:center;
    list-style-type: none;
    margin-top: 30px;
    padding: 0;


ul.naviTop li 
   border:1px solid black;
   display: inline;
   overflow:hidden;
   background-color:#003340;


.navTopRight li:last-child 
    border-right: none;


.navTopRight li a
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    display: inline;
 

ul.naviTop li a:hover 
    background-color:#0099bf;


li.first
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;

li.last
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;

【参考方案1】：

所以我认为您基本上在这里拥有一切，只有一些小细节.. 如果我正确理解您的问题，您只想填充您的 li 背景，而不会使蓝色溢出所有内容.. 最简单的方法是更改​​ @ 987654322@转padding:0px 16px;

之后，您希望删除空白区域，这可以通过更改您的 html 代码结构来实现，如下所示：

                <li class="first"><a href="index.html">Home</a></li
                ><li><a href="#scrollToBot">Item1</a></li
                ><li><a href="Item2.html">Item2</a></li
                ><li><a href="Item3.html">Item3</a></li
                ><li class="last"><a href="Item4.html">Item4</a></li>

注意所有的 li 标签是如何在新标签开始之前结束的。这也是一个工作小提琴！所以不需要使用位置或浮动！

https://jsfiddle.net/nfztdxr2/3/

【讨论】：

你是英雄！非常感谢。

我将答案更改回 a 标签并改为更改填充，然后它应该可以正常工作 =)

【参考方案2】：

如果您想修复溢出悬停，只需更改这部分 css

ul.naviTop li 
   border:1px solid black;
   display: inline; -> *display: inline-block;*
   overflow:hidden;
   background-color:#003340;

这是结果https://jsfiddle.net/nfztdxr2/

让我知道这是否是您尝试实现的目标，或者可能还有其他问题？

【讨论】：

非常感谢您的意见，它确实解决了悬停问题。尽管“可以这么说”的每个单词或元素之间仍然存在很小的差距。你知道我该如何解决这个问题吗？

- 你可以添加margin-right: -4px;到这个类 ul.naviTop li 。这是小提琴jsfiddle.net/v3oq5jr5——还有其他方法可以修复它，请在此处阅读css-tricks.com/fighting-the-space-between-inline-block-elements

【参考方案3】：

你也可以设置没有“a”的悬停

ul.naviTop li:hover。 ...

它看起来也更好。

【参考方案4】：

问题是您在.navTopRight li a 上有padding: 14px 16px;，它设置为display: inline;。您不能为内联元素提供垂直边距/填充/等，并让它影响它之前/之后的元素。因此，当您将鼠标悬停在这些链接上并应用背景颜色时，它看起来真的很奇怪，因为垂直填充变得可见。假设链接未悬停时导航菜单看起来像您想要的那样，只需从链接中删除垂直（顶部/底部14px）填充。

.navTopRight
	text-align:center;
	list-style-type: none;
    margin-top: 30px;
    padding: 0;


ul.naviTop li 
   border:1px solid black;
   display: inline;
   overflow:hidden;
   background-color:#003340;


.navTopRight li:last-child 
    border-right: none;


.navTopRight li a
    color: white;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
 

ul.naviTop li a:hover 
	background-color:#0099bf;


li.first
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;

li.last
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;

 <div class="navTopRight">
                    <ul class="naviTop">
                    <li class="first"><a href="index.html">Home</a></li>
                    <li><a href="#scrollToBot">Item1</a></li>
                    <li><a href="Item2.html">Item2</a></li>
                    <li><a href="Item3.html">Item3</a></li>
                    <li class="last"><a href="Item4.html">Item4</a></li>
                </ul>
                </div>