首页 文章

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

提问于
浏览 次
136

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

9 回答

  • 0
    .parent:hover > .child {
    /*do anything with this child*/
}
    回复于
  • 2

    为什么不使用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

    回复于
  • 1

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

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

    SEE DEMO

    回复于
  • 8

    使用 toggleClass() .

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

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

    点击此处查看工作示例 .

    回复于
  • 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>
    回复于
  • 124

    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 .

    回复于
  • 3

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

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

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

    • 行为是：

    • 单击时保持打开状态，再次单击页面上的任何其他位置时关闭

    • 当鼠标滚出菜单元素时自动关闭 .

    回复于
  • 0

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

    .parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
    回复于
  • 218

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

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

    但是这样，你需要的只是将 parent-hover-show 应用于一个元素，剩下的就被处理了，你可以保留你想要的任何默认显示类型，而不必始终为"block"或为每种类型创建多个类 .

    回复于

相关问题