Javascript:div内的元素:悬停时突出显示高度[重复]
Posted
技术标签:
【中文标题】Javascript:div内的元素:悬停时突出显示高度[重复]【英文标题】:Javascript: a elements inside div: highlight height when hover [duplicate] 【发布时间】:2019-04-08 03:25:42 【问题描述】:我有一个如下所示的自定义导航栏:
: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
元素,但没有成功。
【问题讨论】:
【参考方案1】:这是使用 - 感谢position: fixed
到Navbar
时的常见副作用,尝试将其删除,您会发现当将鼠标悬停在<a>
上时,它会填充导航栏的Vertical Height
Temani Afif
纠正我,这是一个错误的信息 - 实际上,position: fixed
和position: absolute
只影响它的元素,而不影响它的子节点!
解决方案
您需要将这几个 CSS 属性添加到您的 <a>
标签中:
display: inline-block;
height: 100%;
进一步修改
从您的Navbar
中删除padding-top: 3px
删除内部的<p>
标签,它们没有用处,让您难以处理您的代码/样式!
从#custom-navbar
中删除无用的display: inline;
- position: fixed
消除了display
属性!
您可以添加margin: 0 5px
之类的内容以在链接之间保留空格! (我已经在下面添加了!)
所以,完整代码现在看起来像这样:
: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;
text-align: right;
#custom-navbar a
display: inline-block;
margin: 0 5px;
height: 100%;
#custom-navbar a:hover
background-color: grey;
<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>
【讨论】:
不明白为什么 position:fixed 是这里的罪魁祸首?它与位置无关:固定 好问题@TemaniAfif,position: fixed
的问题在于它允许其元素脱离渲染的Default Flow
,因此内部元素无法识别停留在哪里,那就是为什么我们要面对这种意想不到的行为......另外,position: absolute
对其元素及其子元素具有相同的影响!
对不起,但你说的是假的...... position:fixed 对子/内部元素没有影响,它只影响主要元素......所以有或没有 position:fixed 问题仍然存在一样的
我不这么认为!在这个问题中,如果我们删除了position: fixed
,我们的问题将在这里解决。
如果你删除position:fixed
,你会因为display:inline
而产生另一个问题,因为 position:fixed 使元素成为块元素,所以显示被忽略...删除 display:inline 你会看到有和没有位置的结果相同:固定【参考方案2】:
给a标签
display: inline-block;
之后高度:100%;将工作。 (内联元素没有任何高度,内联块有高度。 您还需要取消导航栏 div 中的填充。
【讨论】:
感谢您的回答。我接受了他们所投入工作的更详细的答案,将您的答案作为一个 tl;dr 版本提供了真正的帮助,以便快速了解最少的必要编辑。【参考方案3】:不要在A里面使用P,这是坏事look this working example
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;
【讨论】:
以上是关于Javascript:div内的元素:悬停时突出显示高度[重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 jquery ui 可拖动突出显示悬停时的可放置区域
jQuery 需要帮助在具有特定类的 div 元素中选择 tr 元素