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

159

首先，我假设这对于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：block; 当鼠标悬停在父div上时。问题是此标记出现在我网站上的多个位置，并且我只希望在鼠标悬停在其父对象上方时显示该子对象，而不是在鼠标悬停在其他任何父对象上时都显示该子对象（它们都具有相同的类）名称和ID）。

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

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

— 哈特利布罗迪
source

260

为什么不只使用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');
});

这是一个简单的例子：小提琴

— 史提芬
source

该代码对我不起作用。应该说“ .parent.hover”而不是“ .parent：hover”吗？案例，我从未见过你拥有的东西。逗号不表示多个选择器采用相同的样式吗？我看不出这有什么帮助。有关该CSS的更多信息，请0 =]

— Hartley Brody

6

:hover是CSS2定义的“动态伪类”之一（此处为spec）。这是一个简单的示例：http : //jsfiddle.net/5FLr4/。这个对我有用。

— 李，

嗯，非常感谢！我实际上有一些相对的定位，将子文本推开了。>。<我感谢您的帮助！

— 哈特利·布罗迪

显然，如果您想更改child元素内滚动条的高亮显示，则此方法不适用于.child ::-webkit-scrollbar-thumb。

— thdoan

1

.parent:not(:hover) .child { display: none; }似乎对我来说效果很好，尽管我当然不担心IE6。但是通过这种方式，我可以在我不想拥有统一display属性的元素上使用它。

— 布莱尔·康诺利

147

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

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

查看演示

— 阿里·阿德拉维（Ali Adravi）
source

9

使用toggleClass()。

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

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

在此处检查工作示例。

— 侯赛因
source

7

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

— 阿米尔·拉曼（Amir Rahman）
source

3

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

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

您可以在jsFiddle看到该示例。

— 罗杰·罗洛夫斯
source

3

我有一个我认为是更好的解决方案，因为它可以扩展到更多级别，并且可以扩展到任意数量，而不仅仅是两个或三个。

我使用边框，但是也可以使用任何想要的样式（例如背景色）来完成。

有了边界，想法是：

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

— 666
source

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

— jenniwren

2

如果您使用Twitter Bootstrap样式和基本JS作为下拉菜单，请执行以下操作：

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

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

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

— 托宾
source

2

不知道是否有这样做的可怕原因，但它似乎可以在最新版本的Chrome / Firefox上与我一起使用，而页面上没有很多元素，因此没有任何可见的性能问题。

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

但是通过这种方式，您只需要应用parent-hover-show到一个元素，其余的工作就得到了照顾，您可以保留所需的任何默认显示类型，而不必始终对其进行“阻止”或为每种类型创建多个类。

— 布赖恩·利什曼
source

0

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

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

— hamboy75
source