顯示家長鼠標懸停的chid div - 需要javascript？

我需要顯示一個div，當你放置在它的父級上時（默認是爲了隱藏子div）。是唯一的方法來做到這一點與JavaScript？謝謝顯示家長鼠標懸停的chid div - 需要javascript？

2011-06-10 Evans

可能重複顯示另一個可能的元素？]（http://stackoverflow.com/questions/3659294/pure-css-hover-show-another-element-possible） – robertc 2011-06-10 10:47:21

不需要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; }

來源

2011-06-10 10:38:42 Marcel

+1對於沒有JavaScript。 – Dormouse 2011-06-10 10:39:08

需要JavaScript的地方，老年人的瀏覽器。 – dotty 2011-06-10 10:40:26

除IE6之外，應該在任何地方工作...... IE6又是什麼？ – 2011-06-10 10:41:16

使用jQuery您可以將mouseover事件添加到父DIV和show孩子股利。以this fiddle爲例。

來源

2011-06-10 10:38:46

使用jQuery，絕對：

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

來源

2011-06-10 10:38:51 Dormouse

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

來源

2011-06-10 10:39:51 sandeep

因爲它是你並不需要JavaScript的一個子元素。這是一個example。

來源

2011-06-10 10:41:06

我最初使用上面的CSS解決方案，但不得不使用jQuery，因爲我的孩子div包含導致懸停閃爍的圖像。這裏我們將鼠標懸停在父時（如桌面屏幕尺寸）上的mouseenter和隱藏它放在鼠標離開，但只有當現在徘徊在主要頁面的容器中，以最小化閃爍顯示孩子：

$(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(); 
    }); 
});

[純CSS懸停

來源

2017-01-03 16:12:40 numbtongue

顯示家長鼠標懸停的chid div - 需要javascript？

回答

相關問題