Question

我需要在你的父节点上显示一个div（默认是隐藏子div）。使用javascript是唯一的方法吗？谢谢

Answer 1

不需要JS。

<强> HTML

<div class="parent">
    <p>Hello, I'm a child...</p>
    <p class="hidden">..and so am I but I'm hidden.</p>
</div>

<强> CSS

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

Answer 2

@jdln;是

<强>的CSS：

.outer {
    background:red;
    height:100px;
}
.box1 {
    background:blue;
    height:100px;
    width:80px;
    display:none;
}
.outer:hover .box1{
    display:block;
    cursor:pointer;
}

检查小提琴：http://jsfiddle.net/sandeep/XLTV3/1/

Answer 3

绝对是jQuery：

$("#some_parent").hover(function ()
{
    $(this).children("#some_child_div").show();
});

Answer 4

我最初使用上面的css解决方案，但不得不使用jQuery，因为我的孩子div包含一个导致悬停闪烁的图像。在鼠标中心悬停在父级（如果是桌面屏幕大小）上并将其隐藏在mouseleave上时，我们将显示子项，但仅当现在将鼠标悬停在主页面容器上时，才能最小化闪烁：

$(document).ready(function () {
    $(".parent-qtip").mouseenter(function () {
        if ($(window).width()>=1200)
            $(this).children(".child-qtip").show();
    });
    $(".parent-qtip").mouseleave(function () {
        if ($('.page-content').find('.container:hover').length)
            $('.child-qtip').hide();
    });
});

Answer 5

使用jQuery，您可以向父div添加mouseover事件，并为子div添加show。请参阅this fiddle作为示例。

Answer 6

因为它是一个子元素，所以你不需要javascript。这是一个example。

Answer 7

除了可以接受的答案外，还可以使用opacity，这样布局就不会在悬停时跳来跳去（这也可以为外观设置动画）：

css：

.show-on-hover-parent:hover .show-on-hover-item {
    opacity: 1;
   //transition: opacity .5s; //<- optional opacity animation
}

.show-on-hover-parent .show-on-hover-item {
    opacity: 0;
   //transition: opacity .5s; //<- optional opacity animation
}

html：

<div class="show-on-hover-parent">
    <div>Always visible 1</div>
    <div class="show-on-hover-item">visible on hover</div>
    <div>Always visible 2</div>
</div>

在父母的鼠标悬停上显示子div - 需要javascript吗？

7 个答案: