显示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

回答

相关问题