当父元素悬停时更改子元素的 CSS答案

【问题标题】：Changing the child element's CSS when the parent is hovered当父元素悬停时更改子元素的 CSS
【发布时间】：2011-07-01 00:31:42
【问题描述】：

首先，我假设这对于 CSS3 来说太复杂了，但如果那里有解决方案，我很乐意使用它。

HTML 非常简单。

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

子 div 设置为 display:none;默认情况下，但随后更改为 display:block;当鼠标悬停在父 div 上时。问题是这个标记出现在我网站上的几个地方，我只希望在鼠标悬停在其父级上时显示子级，而不是在鼠标悬停在任何其他父级上时显示（它们都具有相同的类名称，没有 ID）。

我尝试使用$(this) 和.children() 无济于事。

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

【问题讨论】：

标签： jquery css jquery-selectors parent

【解决方案1】：

为什么不直接使用 CSS？

.parent:hover .child, .parent.hover .child { display: block; }

然后为不支持 :hover 的 IE6（例如在条件注释中）添加 JS：

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

这是一个简单的例子：Fiddle

【讨论】：

该代码对我不起作用。它应该说“.parent.hover”而不是“.parent:hover”吗？案例我从来没有见过你以前有什么。逗号不是表示多个选择器采用相同的样式吗？我看不出这有什么帮助。关于该 CSS 的更多信息，赞成 0=]
:hover 是 CSS2 (here's the spec) 定义的“动态伪类”之一。这是一个简单的示例：http://jsfiddle.net/5FLr4/。它对我有用。
啊，非常感谢！实际上，我有一些相对定位将子文本推到视野之外……哦！ >.
如果你想改变子元素内滚动条的高亮，显然这对 .child::-webkit-scrollbar-thumb 不起作用。
.parent:not(:hover) .child { display: none; } 似乎对我很有效，但我当然不担心 IE6。但是这样我就可以在我不想拥有统一的display 属性的元素上使用它。

【解决方案2】：

不用JavaScript或jquery，CSS就够了：

.child{ display:none; }
.parent:hover .child{ display:block; }

SEE DEMO

【讨论】：

【解决方案3】：

.parent:hover > .child {
    /*do anything with this child*/
}

【讨论】：

【解决方案4】：

使用toggleClass()。

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

color 是类。您可以根据需要设置类的样式，以实现您想要的行为。该示例演示了如何在鼠标移入和移出时添加和删除类。

检查工作示例here。

【讨论】：

【解决方案5】：

Stephen's answer 是正确的，但这是我对他的回答的改编：

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

你可以看到这个例子working over at jsFiddle。

【讨论】：

【解决方案6】：

我有一个我认为更好的解决方案，因为它可以扩展到更多级别，可以根据需要进行扩展，而不仅仅是两个或三个。

我使用边框，但也可以使用任何想要的样式，例如背景色。

有了边框，想法是：

只有一个 div 有不同的边框颜色，鼠标所在的 div，不在任何父级，也不在任何子级，因此只能看到不同颜色的 div 边框，而其余的保持白色。

您可以在以下位置进行测试：http://jsbin.com/ubiyo3/13

这里是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>

【讨论】：

这不符合问题的要求。它改变了悬停在元素周围的边框。不是子元素周围的边框。

【解决方案7】：

不确定是否有可怕的理由这样做，但它似乎可以在最新版本的 Chrome/Firefox 上与我一起使用，并且页面上有很多元素没有任何明显的性能问题。

*:not(:hover)>.parent-hover-show{
    display:none;
}

但是通过这种方式，您只需将parent-hover-show 应用于一个元素，其余的都将得到处理，并且您可以保留您想要的任何默认显示类型，而不必总是“阻止”或为每个元素创建多个类输入。

【讨论】：

【解决方案8】：

如果您使用Twitter Bootstrap 样式和基本 JS 作为下拉菜单：

.child{ display:none; }
.parent:hover .child{ display:block; }

这是创建粘性下拉菜单的缺失部分（不烦人）

行为是：
1. 点击时保持打开状态，再次点击页面上其他任何位置时关闭
2. 当鼠标滚出菜单元素时自动关闭。

【讨论】：

【解决方案9】：

要从 css 更改它，您甚至不需要设置子类

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }

【讨论】：

【解决方案10】：

对我有用的是 nth-of-type 以特定元素、SVG 图标为目标，而不是使用 display:none;为了避免以后找不到它，我使用填充颜色作为背景颜色，在这种情况下为白色，然后以 css 为目标，并使用 :nth-type-of(1) 直接找到 SVG 元素

HTML

<div class="feature-col">
<div class="feature-icon bg-primary bg-dark" style="border:0.125em white">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" class="bi bi-laptop" viewBox="0 0 16 16"><path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"></path>
</svg>
</div>
<h5>Website Design and Hosting</h5>
<p>Some text in here that is a child element as well...</p>
<a href="javascript:void(0);" class="icon-link">Call to action</a>
</div>

CSS

.feature-col:hover svg:nth-of-type(1){
fill: #FF5B0D;
cursor:pointer;
}

JSFIDDLE 玩： https://jsfiddle.net/93de7zbc/6/

【讨论】：

【解决方案11】：

使用 CSS Visibility 属性

尝试使用 css 可见性属性来保持 div 的大小，以便将元素悬停：

.child {
  visibility: hidden;
}
.parent:hover .child {
  visibility: visible;
}

<h3>Hover below</h3>
<div class="parent">
  <div class="child">Text Block 1</div>
</div>

<div class="parent">
  <div class="child">Text Block 2</div>
</div>

【讨论】：