html - Javascript:div内的元素:悬停时突出显示高度
问题描述
我有一个看起来像这样的自定义导航栏:
:root {
--navbar-background-color: #ff1a1a;
--navbar-text-color: var(--header-text-color) !important;
--navbar-height: 23px;
--navbar-top: 40px;
--navbar-font-size:
}
#custom-navbar {
overflow: hidden;
background-color: var(--navbar-background-color);
height: var(--navbar-height);
top: var(--navbar-top);
right: 0;
left: 0;
position: fixed;
overflow-y: hidden;
z-index: 1;
padding-right: 50px;
padding-top: 3px;
display: inline;
text-align: right;
}
#custom-navbar p {
color: var(--navbar-text-color);
display: inline;
padding: 10px;
font-size: var(--navbar-font-size);
text-decorations: none;
height: 100% !important;
}
#custom-navbar a:hover {
background-color: grey;
}
<div id="custom-navbar">
<a href="#">
<p>LINK 1</p>
</a>
<a href="#">
<p>LINK 2</p>
</a>
<a href="#">
<p>LINK 3</p>
</a>
<a href="#">
<p>LINK 4</p>
</a>
</div>
当我将鼠标悬停在导航栏的链接之一上时,该链接以灰色突出显示。但是,仍然有一些导航栏初始颜色可见:突出显示颜色并未覆盖所有导航栏高度。
jsfiddle:https ://jsfiddle.net/rafn51sk/3/
我如何解决它?我尝试设置height: 100%
为导航栏的p
元素,但没有奏效。
解决方案
不要在 A 中使用 P,看看这个工作示例是一件坏事
HTML:
<div id="custom-navbar">
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<a href="#">LINK 3</a>
<a href="#">LINK 4</a>
</div>
CSS:
:root {
--navbar-background-color: #ff1a1a;
--navbar-text-color: var(--header-text-color) !important;
--navbar-height: 23px;
--navbar-top: 40px;
--navbar-font-size:
}
#custom-navbar {
overflow: hidden;
background-color: var(--navbar-background-color);
height: var(--navbar-height);
top: var(--navbar-top);
right: 0;
left: 0;
position: fixed;
overflow-y: hidden;
z-index: 1;
padding-right: 50px;
padding-top: 3px;
display: inline;
text-align: right;
}
#custom-navbar a {
color: var(--navbar-text-color);
display: inline;
padding: 10px;
font-size: var(--navbar-font-size);
text-decoration: none;
height: 100% !important;
}
#custom-navbar a:hover {
background-color: grey;
}
推荐阅读
- html - 防止文本在表格中换行,直到达到“最大宽度”
- python - pygame set_timer() 在类中不起作用
- react-dropzone - 这个错误是关于什么的,我无法得到它?
- google-cloud-platform - .map 不是 Google 地球引擎中的功能
- php - Codeception 中的 @depends 注释不能与来自不同类的测试一起使用
- python - Visual Studio Code 使用 python3 在 docker 容器中调试 python 2.7 应用程序
- javascript - 在 react/javascript 中导入以 .js 结尾的模块
- api - 使用 JWT 对系统(client_id)和用户(用户名、密码)进行身份验证
- python - 在 Windows 10 上使用 pyodbc 在 Locust 负载测试中没有并发
- python - 没有“T00:00:00”的日期提取,格式为 %d/%m/%Y