Question

首先，我认为这对于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");
        });

Answer 1

为什么不使用CSS？

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

然后为IE6添加JS（例如在条件注释中），它不支持：正确悬停：

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

以下是一个简单示例：Fiddle

Answer 2

无需使用JavaScript或jquery，CSS就足够了：

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

SEE DEMO

Answer 3

使用toggleClass()。

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

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

检查工作示例here。

Answer 4

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

Answer 5

我认为这是一个更好的解决方案，因为它可以扩展到更多级别，尽可能多，不仅仅是两个或三个。

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

有了边框，我们的想法是：

不同的边框颜色只有一个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>

Answer 6

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。

Answer 7

如果你正在使用Twitter Bootstrap样式并将JS作为下拉菜单：

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

这是创建粘性下拉列表的缺失部分（这并不烦人）

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

Answer 8

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

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

但是这样，你需要的只是将parent-hover-show应用于一个元素，剩下的就被处理了，你可以保留你想要的任何默认显示类型，而不是总是“阻塞”或进行多个类对于每种类型。

Answer 9

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

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

Answer 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/

Answer 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>

在父项悬停时更改子元素的CSS

11 个答案:

检查工作示例here。

HTML

CSS

的jQuery

使用 CSS Visibility 属性