CSS悬停在两个不同的元素和影响一个相同的元素

悬停两个div有没有办法影响一个div不同的方式吗？最好是以CSS方式了解解决方案，但如果没有CSS方式，那么我可以使用JQuery或Javascript方式。CSS悬停在两个不同的元素和影响一个相同的元素

例如，当我将鼠标悬停在div myData1上时，则会影响分隔符以获得某种样式。当我悬停在div myData2上时，则会影响分隔符以任何其他独特方式。

.myData1{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #444; 
 
} 
 

 
.myData1:hover + #separator{ 
 
    width: 50px; 
 
    heightL 100px; 
 
    background-color: #cba; 
 
} 
 

 
.myData2{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #888; 
 
} 
 

 
.myData2:hover + #separator{ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: #dba; 
 
} 
 

 
#separator{ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: #666; 
 
}

<div> 
 
<div class="myData1"> 
 
</div> 
 
<div id="separator"> 
 
</div> 
 
<div class="myData2"> 
 
</div> 
 
</div>

来源

2017-07-26 Martin Krajčírovič

才能改变div的顺序？如果我们可以在CSS本身有解决方案，或者我们必须为jQuery。 – weBBer

使用jQuery，这将是一个解决方案：

$('.myData1').mouseover(function() { 
 
$('#separator').css('background-color', '#cba'); 
 
}); 
 
$('.myData1').mouseout(function() { 
 
$('#separator').css('background-color', '#666'); 
 
}); 
 
$('.myData2').mouseover(function() { 
 
$('#separator').css('background-color', '#dba'); 
 
}); 
 
$('.myData2').mouseout(function() { 
 
$('#separator').css('background-color', '#666'); 
 
});

.myData1{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #444; 
 
} 
 

 
.myData2{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #888; 
 
} 
 

 
#separator{ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<div class="myData1"> 
 
</div> 
 
<div id="separator"> 
 
</div> 
 
<div class="myData2"> 
 
</div> 
 
</div>

来源

2017-07-26 10:46:06 Johannes

看起来像是唯一正确的解决方案，涵盖了我所有的需求。代码响应屏幕变化，不仅适用于严格的元素大小，也不改变元素顺序，并且可以将解决方案扩展到多个分隔符。 –

只是CSS：

.wrapper { 
 
    position: relative; 
 
} 
 

 
.myData1 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #444; 
 
} 
 

 
#separator { 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: #666; 
 
    position: relative; 
 
    top: -50px; 
 
} 
 

 
.myData2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #888; 
 
    position: relative; 
 
    top: 100px; 
 
} 
 

 
.myData1:hover ~ #separator { 
 
    background-color: #cba; 
 
} 
 

 
.myData2:hover ~ #separator { 
 
    background-color: #cba; 
 
}

<div class="wrapper"> 
 
    <div class="myData1"></div> 
 
    <div class="myData2"></div> 
 
    <div id="separator"></div> 
 
</div>

来源

2017-07-26 10:55:36 Ehsan

这可能对静态元素大小有好处。不幸的是，我的元素必须始终负责筛选变化。所以我不能接受使用相对定位作为我正在寻找的解决方案。也许这是不好的主意，用静态的宽度和高度纯的DIV简单ilustrate我的问题，而是感谢。 –

@MartinKrajčírovič好运 – Ehsan

.data{ 
 
position : relative; 
 
height:200px; 
 
width:50px; 
 
display:inline-block 
 
} 
 
.myData1{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #444; 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:0px; 
 
} 
 

 
.myData1:hover + #separator2{ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display:inline-block; 
 
} 
 

 
.myData2{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #888; 
 
    display:inline-block; 
 
    position:absolute; 
 
    bottom:0px; 
 
} 
 

 
.myData2:hover + #separator{ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: #dba; 
 
} 
 

 
#separator{ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: #666; 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:50px; 
 
} 
 
#separator2{ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: #666; 
 
    display:none; 
 
    z-index:99999; 
 
    position:absolute; 
 
    top:50px; 
 
}

<div class="data"> 
 
<div class="myData1"> 
 
</div> 
 
<div id="separator2"></div> 
 
<div class="myData2"> 
 
</div> 
 
<div id="separator"></div> 
 
    
 
</div>

试一下这个

来源

2017-07-26 11:01:58 M0ns1f

@ehsan只有CSS ^^ – M0ns1f

嗯，这可能会奏效，但可悲的是，我将不得不在HTML/CSS产生更多的分离器和该解决方案就像是只因为你是严格的定位数据的一个分离器严格制作到TOP和BOTTOM。但是，谢谢。 –

CSS悬停在两个不同的元素和影响一个相同的元素

回答

相关问题