堆栈内存溢出
  繁体   English   中英

如何获得CSS悬停效果以覆盖导航栏的整个顶部和底部？

[英]How can I get my CSS hover effect to cover the entire top and bottom of my navigation bar?

 原文  2015-03-16 01:38:36  1   4    html/ css

问题描述

我希望这样，当您将鼠标悬停在每个链接上时，悬停效果会覆盖导航栏的顶部和底部，以及左侧和右侧的一些填充。 我该如何实现？ 谢谢。

例如： 例

#navigation {
    width: 1000px;
    height: 65px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.58);
    opacity: 0.9;
    border-radius: 5px;
    position: fixed;
    margin-top: 20px;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#navigation > ul {
    display: inline-block;
    position: absolute;
    list-style-type: none;
}

#navigation > ul > li {
    display: inline-block;
    padding: 0px 20px;
}

#navigation > ul > li > a {
    color: #fff;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    display: block;
}

#navigation > ul > li > a:hover, #navigation > ul > li > a:active {
    color: #FFF;
    background: rgba(255, 255, 255, 0.1);
    background-repeat: repeat;
    height: 100%;
    width: auto;
}

http://jsfiddle.net/rxejwqL2/

4 个解决方案

解决方案1
 1  2015-03-16 02:28:55

使用“正确的” CSS可以轻松实现。

您需要做的就是为正确的元素（在本例中为<a> </a>标记）添加填充。

我已经剥离了您的CSS，仅包括达到所需效果所需的条件。 您可以向其中添加更多内容以获得圆角等。

尝试这个： 

 #navigation { width: 1000px; background-color: #444444; } #navigation > ul > li { display: inline-block; } #navigation > ul > li > a { color: #fff; font-family:"Trebuchet MS", Helvetica, sans-serif; font-size: 30px; text-decoration: none; display: block; padding: 20px; height: 100%; } #navigation > ul > li > a:hover, #navigation > ul > li > a:active { background-color: #666666; } 
 <div id="navigation"> <ul> <li class="active"><a href="/">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div>

解决方案2
 0  2015-03-16 02:36:45

发生了几件事：

  • 默认浏览器样式
  • 在标签上悬停时在li上填充

我认为以下内容将为您提供所需的东西。 它似乎可以保留您在Chrome和Firefox中的死角。 

#navigation {
    width: 1000px;
    height: 65px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.58);
    opacity: 0.9;
    border-radius: 5px;
    position: fixed;
    margin-top: 20px;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#navigation > ul {
    display: inline-block;
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#navigation > ul > li {
    display: inline-block;
    padding: 16px 20px;
}
#navigation > ul > li > a {
    color: #fff;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
}
#navigation > ul > li:hover, #navigation > ul > li:active {
    color: #FFF;
    background: rgba(255, 255, 255, 0.1);
    background-repeat: repeat;
    height: 100%;
    width: auto;
}

解决方案3
 0  2015-03-16 02:44:49

您可以通过执行以下操作使ul标签和li标签的div #navigation标签高度为100％-height height:100%; margin:0; to #navigation > ul height:100%; margin:0; to #navigation > ul height:100%; margin:0; to #navigation > ul ，然后line-height: 65px; 转到#navigation > li ，然后仅将鼠标悬停更改为li 

#navigation > ul > li:hover {
    color: #FFF;
    background: rgba(255, 255, 255, 0.1);
    background-repeat: repeat;
    height: 100%;
    width: auto;
}

因此，整个CSS将如下所示- 

#navigation {
    width: 1000px;
    height: 65px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.58);
    opacity: 0.9;
    border-radius: 5px;
    position: fixed;
    margin-top: 20px;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#navigation > ul {
    display: inline-block;
    position: absolute;
    list-style-type: none;
    height: 100%;
    margin: 0;
}
#navigation > ul > li {
    display: inline-block;
    padding: 0px 20px;
    line-height: 65px;
}
#navigation > ul > li > a {
    color: #fff;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    display: block;
}
#navigation > ul > li:hover {
    color: #FFF;
    background: rgba(255, 255, 255, 0.1);
    background-repeat: repeat;
    height: 100%;
    width: auto;
}

这将为您提供div的完整高度以及您添加的填充。 http://jsfiddle.net/rxejwqL2/4/

解决方案4
 0  2016-07-15 06:54:03

请按照以下示例操作，它将起作用 

<i><HTML>
<head>
<link href="layouts.css" rel="stylesheet" type="text/css"/>
<link href="menu.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"    />
<title>LOGIN</title>
</head>

<body>
<div id="Holder">
<div id="Header"> </div>
<div id="NavBar">
<nav>
<ul>
       <li><a href="#">Login</a></li>
       <li><a href="#">Register</a></li>
       <li><a href="#">Forgot Password</a></li>
</ul>
</nav>
</div>
<div id="Content">
< div id="PageHeading">
 <h1>PAGE HEADING </h1>
</div>
<div id="ContentLeft">
<h2>Your Message Here</h2>
 <h6><br/>
  <br/>
YOUR MESSAGE 
</h6>
</div>
<div id="ContentRight"></div>
</div>
<div id="Footer"></div>
</div>
</body>
</html></i>

CSS 

 nav ul{

 margin:0;

 padding:0;

}

nav ul li{

list-style-type:none;

float:left;

display:block;

   width:150px;

height:60px;

text-align:center;

line-height:55px;

font-family:Arial, Helvetica, sans-serif;

font-size:17px;

}
nav ul li a{

text-decoration:none;

color:#FFFFFF;

}
nav ul li:hover{

background-color:rgb(242,242,242); 
}

nav ul li:hover a{

display:block;

color:#000;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使导航栏覆盖整个页面？ 我怎样才能让我的酒吧 hover go 在底部而不是顶部 "如何使用 css 使我的导航栏粘在屏幕顶部" 如何为导航栏创建平滑的下拉效果？ 如何在 css 中为我的社交图标做悬停效果？ 尝试将悬停效果添加到我的导航栏中 如何消除图像中的这一小段线？ （CSS3，悬停生效） CSS：如何在页面顶部将标题和导航居中？ 我的导航栏的 css 代码没有覆盖我屏幕的整个宽度。 它在边缘前约 10 个像素处停止 我的代码 HTML 和 CSS 是否正确，如何仅向导航栏中的文本添加悬停效果？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM