顯示DIV懸停其他DIV是不是父母與CSS或JS

現在我可以用CSS做到這一點，但它只適用於當隱藏的div是父母的孩子。您將鼠標懸停在父div上，並將懸停上的CSS設置爲從none到block顯示子項，類似的。顯示DIV懸停其他DIV是不是父母與CSS或JS

但是，如果隱藏塊位於您懸停並隱藏的塊出現的div之外，您該如何做？

實施例：

<div class="field-1"></div> 
<div class="field-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.</div>

的jsfiddle http://jsfiddle.net/23u3rmx5/將鼠標懸停在紅色塊的點域-2必須出現在其下方。您無法移動div結構，例如在.field-1裏移動.field-2，我可以做到這一點，但這不是解決方案。

感謝您的幫助和歡呼！週末愉快！

來源

2014-09-27 Optimus Prime

有沒有jquery/JavaScript代碼裏面的小提琴..到目前爲止你已經嘗試..？ – 2014-09-27 08:22:29

如果需要，我也接受jQuery的任何解決方案。謝謝。 – 2014-09-27 08:23:13

okk這很好，但首先你必須展示你到目前爲止所嘗試的，我們將更正你的代碼......我們不會爲你寫代碼.. – 2014-09-27 08:24:30

在你可以使用adjacent sibling combinator +目標有.field-2類元素如下這種特定情況下：

Example Here

.field-1:hover + .field-2 { display: block; }

此外，如果.field-2不緊跟.field-1，你可以嘗試使用general sibling combinator ~代替：

Example Here

.field-1:hover ~ .field-2 { display: block; }

來源

2014-09-27 08:24:37

嘿，那太棒了。但那加號，有多少瀏覽器支持它？所有瀏覽器中的這個主要功能還是一些奇特的東西？再次感謝。 – 2014-09-27 08:27:02

@OptimusPrime即使在Internet Explorer 7中也支持它。 – 2014-09-27 08:30:16

值得注意的是，相鄰兄弟組合器是[CSS選擇器級別2]（http：//www.w3）的一部分。org/TR/CSS21/selector.html＃adjacent-selectors），而一般兄弟組合子屬於[CSS選擇器級別3]（http://www.w3.org/TR/css3-selectors/#general-sibling-combinators）。但是，它們都支持非常廣泛的網絡瀏覽器，包括IE7。 – 2014-09-27 08:41:43

http://jsfiddle.net/23u3rmx5/1/

$(".field-1").on("mouseover", function() { 
    $(".field-2").show(); 
}).on("mouseout", function() { 
    $(".field-2").hide(); 
});

如果雖然使用哈希姆的解決方案你確定你不會在未來

來源

2014-09-27 08:25:50

.field-1 { 
    width: 150px; 
    height: 150px; 
    display: block; 
    background-color: red; 
} 
.field-1:hover + .field-2{ 
    display: block; 
} 
.field-2 { 
    background-color: #ccc; 
    display: none; 
}

來源

2014-09-27 08:30:27

這裏來改變DOM結構使用jQuery的解決方案：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
<script> 
$('.field-1').mouseenter(function(){ 
    $('.field-2').show(); 
    }); 
$('.field-1').mouseleave(function(){ 
$('.field-2').hide(); 
    }); 
</script>

JSFIDDLE DEMO

來源

2014-09-27 08:34:31 Jinandra

顯示DIV懸停其他DIV是不是父母與CSS或JS

回答

相關問題