显示父母鼠标悬停时的chid div - 需要javascript吗？

I need to show a div when you house over its parent (default is for the child div to be hidden). Is the only way to do this with javascript? Thanks

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

6 个解决方案

#1

No JS required.

不需要JS。

HTML

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

CSS

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

#2

@jdln; yes

@jdln;是

css:

CSS：

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

check the fiddle: http://jsfiddle.net/sandeep/XLTV3/1/

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

#3

With jQuery, absolutely:

使用jQuery，绝对：

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

#4

I initially was using css solution above, but had to use jQuery because my child div contained an image which caused hover to flicker. Here we're displaying child when hovering over parent (if desktop screen size) on mouseenter and hiding it on mouseleave but only if now hovering over main page container, to minimize flickering:

我最初使用上面的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();
    });
});

#5

Using jQuery you can add a mouseover event to the parent div, and show the child div. See this fiddle as an example.

使用jQuery，您可以将鼠标悬停事件添加到父div，并显示子div。以这个小提琴为例。

#6

Since it's a child element you don't need javascript. Here is an example.

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

#1