如何从导航栏悬停HTML CSS调暗正文？
要从导航栏悬停时调暗HTML正文的背景色，你可以使用CSS的伪类:hover来实现这一效果。以下是一个简单的示例：
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<p>This is the main content of the page.</p>
</main>
</body>
</html>CSS样式
/* styles.css */
body {
transition: background-color 0.3s ease;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
color: #ffcc00;
}
nav:hover ~ main {
background-color: rgba(0, 0, 0, 0.5);
}解释
- HTML结构：基本的导航栏和正文内容。
- CSS样式：
body添加了一个过渡效果，使得背景色的变化更加平滑。nav ul li a设置了导航链接的基本样式。nav ul li a:hover设置了导航链接在悬停时的颜色变化。nav:hover ~ main使用了通用兄弟选择器（~），当导航栏悬停时，选择其后的main元素并改变其背景色。
应用场景
这种效果常用于网站设计中，以提高用户体验。例如，当用户将鼠标悬停在导航栏上时，正文内容的背景色变暗，可以突出导航栏的链接，使用户更容易注意到导航选项。
参考链接
通过这种方式，你可以轻松实现导航栏悬停时调暗正文的效果。
相关·内容
假设当我将鼠标悬停在导航栏中的"More Info“上时，希望将整个身体变暗，并显示新变暗的身体上的一些信息，以及之前存在的所有内容；我该如何执行此操作？到目前为止，我发现的一切似乎都是基于这样一个事实，即您试图隐藏的内容是您悬停的内容的子项，但如果我悬停的是导航栏列表项，我认为我不能这样做，因为我需要段落来编写我想要显示的信息。我的代码如下： <html lang="en">
<hea
浏览 107提问于2019-11-21得票数 1
回答已采纳
我想用MaterializeCSS更改导航栏中的悬停bg颜色，默认效果只是使突出显示更暗，我需要将该突出显示更改为另一种颜色，如白色。提前谢谢你<html>
<link rel=
浏览 4提问于2016-01-27得票数 9
回答已采纳
3回答
我正试图为我的第一个站点创建一个导航栏。在html的正文中 <ul> <li><a</div>#navbar {
margin: 0 auto
浏览 1提问于2014-06-14得票数 2
回答已采纳
1回答
我有一个带导航栏的页面，每个链接都滚动到页面中的一个部分。我有如下所示的悬停动画：.navbar-default .navbar-nav li a:active {}在较小的设备上，当折叠列表扩展时，蓝色框影悬停也会触发.但是我不希望它在折叠的列表锚点中触发，因
浏览 5提问于2016-03-20得票数 2
回答已采纳
3回答
悬停状态下拉菜单的导航栏
、、、、
我在我的网站上创建这个导航栏有困难。 <li class="list"><a class="link" href="">E</a></li
浏览 0提问于2012-06-03得票数 1
回答已采纳
1回答
<link rel="preconnect" href="https://fonts.gstatic.com"> rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/boots
浏览 1提问于2021-01-27得票数 0
回答已采纳
1回答
我正在开发一个web应用程序，并在我的web应用程序的每个页面中使用navbar.html作为布局，代码如下：{% extends 'navbar.html' %}
<h2>PAGE TITLE </h2></div>
一切正常，我的页面看起来很有响应性，但是当我减小浏览器的尺寸时，我的导航</em
浏览 1提问于2020-05-24得票数 1
3回答
我有一个包含导航项目的div，以及一个文本输入(将用作搜索栏)。当用户将鼠标悬停在导航div上时，使用CSS将不透明度从0.6更改为1，然后在用户移开鼠标时再次更改。我想使用CSS或jQuery来保持不透明度为1，如果搜索输入是焦点，无论用户是否悬停在导航栏上。我试过使用一个简单的if函数(我对jQuery的了解不是很多)：
if ($("#navsearchbox").is(":foc
浏览 0提问于2012-11-22得票数 2
回答已采纳
1回答
我在导航栏上有一个悬停效果，我只是在它上面添加了一个下拉列表。当我将鼠标悬停在列表中时，它会失去悬停效果。如何保持悬停效果？我当前的css：.navbar-list:hover {color:red;}<li class="dropdown"> <a href="#" class="navbar-listdropdown">
浏览 1提问于2016-04-12得票数 0
1回答
当同时悬停切换导航时，如何更改图标条的颜色？当前，只有在每个图标栏上悬停时，切换条才会改变。另外，您将如何更改图标条的厚度？CSS： background: #dbdbdb;}
background: white;<
浏览 1提问于2016-10-21得票数 0
回答已采纳
2回答
我正在尝试创建一个下拉菜单，当鼠标悬停在导航栏上时，它会从导航栏中的链接下拉。我不确定如何在下拉列表中隐藏链接列表，然后当适当的链接悬停在上方时才显示它们。任何帮助都将不胜感激。到目前为止我的HTML<html> <title>Dropdown Menu</title>
浏览 7提问于2017-01-08得票数 0
我正在用HTML/HTML5做一些实用的设计。我正在尝试设计一个导航栏只使用html5 (不是CSS或bootstrap或高级技术)。我想在导航栏中设置菜单。我希望导航栏看起来像中提到的那样(关于每个菜单的大小和它如何覆盖整个页面)。我在HTML的正文中使用了以下代码：
<td colspan="3" width
浏览 1提问于2016-07-14得票数 0
嗨，我是Laravel 4的新手，我有一个关于使用刀片模板引擎加载CSS/JS文件的问题。我正在使用一个整体布局，其中包含一个导航栏为每一页。我的问题是，如果我想在页面的标题中包含不同的CSS或JS文件，我将如何完成这一任务，我将扩展标题。下面是一个例子@section('content')
{{HTML::script('js/example.js'
浏览 2提问于2013-10-31得票数 3
回答已采纳
我使用Twitter Bootstrap 3.0设置了以下方案：
.row {} {% include 'buzzwire/header.html' %}
{%buzzbutton.jpg' %}"/></
浏览 3提问于2013-10-23得票数 0
1回答
我试图找出如何格式化一个元素是不同的，在我的网站。例如，我导航栏中列表的背景是绿色的。我正在为列出多个项目在正文中列出一个列表。它自动地将我导航栏中的所有格式输入到我的列表中，就像它应该的那样。我的问题是如何创建一个ID或类来删除在我的导航栏中使用的格式，以便为我体内的列表创建自己的格式。我试着查找youtube视频并在谷歌上搜索，但我所能找到的只是同时设置多个选择器的格式。如何覆盖正文中列表的<e
浏览 3提问于2019-10-28得票数 0
回答已采纳
2回答
为导航栏的图像添加文本
、、、
我有一个导航栏，但想要添加图像到它，这样导航栏是由按钮组成的图像和文本，具有悬停效果等，而不是文本链接。但由于一些链接名称是动态的，我不能在photoshop中制作按钮，所以我想知道如何在html和css中制作这种类型的导航栏。并希望在此下面添加文本，以形成导航栏上的按钮，如果这使其更清晰。
浏览 1提问于2013-02-06得票数 0
回答已采纳
我如何让我的链接显示为图片，并让它们通过悬停等方式进行更改？我已经有按钮图像了。基本上，我正在制作的网站是非常基础的，但它很好。我遇到的一个问题是我的导航栏。导航栏有四个链接，我希望它们显示为图像，并随着悬停而变化。">Information</a> <li>&
浏览 2提问于2013-04-27得票数 0
回答已采纳
2回答
(非常未完成的)站点是live ，正如您所看到的，顶部的导航条不会从包含它的页面继承任何样式。
我怎么才能解决这个问题？影响导航栏的样式是在bootstrap.css和custom.css中定义的，这两个样式都链接在父页面的头上。包含导航条的HTML文档不包含头标记或正文标记，因为它们将嵌套在父页面的正文标记中。将head部分放入navbar的源代码将意味着我的所有CSS和JS每次页面加载三次(父、
浏览 2提问于2014-07-24得票数 2
回答已采纳
2回答
我一直在阅读布局、部分、视图和局部视图，但我真的不知道如何处理这样的布局示例：顶部栏:就像Facebook的顶部栏一样。页脚正文:实际想要的information.Side栏:将包含有关正文内容的相关信息。页脚:版权、许可等。正文将是一个“视图”，边栏将是一个“节”，页脚将是“布局”中的静态HTML，但是...什么是顶栏和导航？与导航一样，它以某种方式与主体相关，但我想
浏览 27提问于2011-05-16得票数 16
回答已采纳
1回答
啮合颜色
、、
我想知道为什么当我的导航条看起来不太重要的时候，一个简单的导航条就会弹出来。当我查看一个站点www.teamliquid.com时，我发现导航栏以一种不引人注目的方式使导航栏的颜色变得更浅、更暗，但确实使这些条子弹出了你的眼睛。我找不到如何做到这一点，当检查元素和检查他们的图像资源时，他们似乎也不这样做，通过图形。
有人能解释如何使用html或css来完成这个任务吗？我需要使用jQuery吗？
浏览 1提问于2013-10-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
