当鼠标悬停在父元素上时，改变子元素的 CSS 样式

首先，我假设这对于CSS3来说太复杂了，但如果在那里有一个解决方案，我愿意用它来代替。

HTML非常简单。




Text Block 1










Text Block 2

子div被设置为display:none;默认情况下，但随后更改为display:block;问题是，这个标记出现在我的网站上的几个地方，我只希望显示的孩子，如果鼠标在它的父母，而不是如果鼠标在任何其他父母(他们都有相同的类名和没有id)。

我已经尝试使用$(this)和.children()无效。

$('.parent').hover(function(){
$(this).children('.child').css("display","block");
}, function() {
$(this).children('.child').css("display","none");
});
252757 次浏览
小开
最佳答案

为什么不直接使用CSS?

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

然后为IE6添加JS(例如在条件注释中)，它不支持正确的:hover:

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

这里有一个简单的例子:小提琴

小开

使用toggleClass()。

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

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

检查工作示例在这里。

小开

斯蒂芬的回答是正确的，但这是我对他的回答的改编:

超文本标记语言

<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');
});

你可以看到这个例子在jsFiddle工作。

小开

我有一个我认为更好的解决方案，因为它可以扩展到更多的级别，想要多少就有多少，而不仅仅是两三个。

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

关于边界，我们的想法是:

  • 只有一个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>
小开

不需要使用JavaScript或jquery, CSS就足够了:

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

SEE DEMO

小开

如果你正在使用Twitter引导样式和base JS作为下拉菜单:

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

这是创建粘性下拉菜单所缺少的部分(这并不令人讨厌)

  • 行为是:
    1. 单击时保持打开状态，再次单击页面其他位置时关闭
    2. 当鼠标滚动出菜单元素时自动关闭。
      3. 李< / ol > < / >
小开 
.parent:hover > .child {
/*do anything with this child*/
}
小开

要从css中改变它，你甚至不需要设置子类

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

不确定是否有可怕的理由这样做，但它似乎与我在最新版本的Chrome/Firefox上工作，没有任何明显的性能问题，页面上有相当多的元素。

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

但通过这种方式，你所需要的只是将parent-hover-show应用到一个元素上，剩下的就搞定了，你可以保留任何你想要的默认显示类型，而不需要总是“block”或为每种类型创建多个类。

小开

对我来说有效的方法是瞄准特定元素，即SVG图标，而不是使用display:none;为了避免以后找不到它，我使用填充色作为背景色，所以在这种情况下，白色，然后用css的父目标和直接找到SVG元素:

超文本标记语言

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

小开

使用CSS可视性属性

尝试使用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>


提交答案