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: fixedNavbar 时的常见副作用,尝试将其删除,您会发现当将鼠标悬停在&lt;a&gt; 上时,它会填充导航栏的Vertical Height - 感谢Temani Afif 纠正我,这是一个错误的信息 - 实际上,position: fixedposition: absolute 只影响它的元素,而不影响它的子节点!

解决方案

您需要将这几个 CSS 属性添加到您的 &lt;a&gt; 标签中:

display: inline-block;
height: 100%;

进一步修改

从您的Navbar 中删除padding-top: 3px 删除内部的&lt;p&gt; 标签,它们没有用处,让您难以处理您的代码/样式! 从#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 元素

将鼠标悬停在按钮上时如何更改 div 的文本?

如果 <td> 内部有多个 <div>,则 <td> 上悬停效果的 CSS 无法正常工作

Flex:鼠标悬停时突出显示元素

悬停时突出显示每个表格对应元素的行和列