CSS survoler deux éléments différents et affecter un même élément

Existe-t-il un moyen de survoler deux divs pour affecter un div de différentes manières? Le mieux est de connaître la solution de manière CSS, mais s'il n'y a pas de chemin CSS, je suis ouvert à JQuery ou Javascript. Par exemple lorsque je survole div myData1, j'affecte le séparateur pour avoir du style. Et quand je passe la souris sur div myData2, j'affecte le séparateur pour qu'il soit d'une autre manière unique.CSS survoler deux éléments différents et affecter un même élément

.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>

Source

2017-07-26 Martin Krajčírovič

peut-on changer l'ordre de la div? Si nous pouvons il y a une solution dans CSS lui-même ou nous devons pour jQuery. – weBBer

En utilisant jQuery, ce serait une solution:

$('.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>

Source

2017-07-26 10:46:06 Johannes

On dirait que c'est la seule solution qui couvre tous mes besoins. Le code est sensible au changement d'écran, solution non seulement pour la taille stricte d'élément, ne changeant pas l'ordre d'élément et est possible d'étendre la solution à plus d'un séparateur. –

Juste avec 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>

Source

2017-07-26 10:55:36 Ehsan

Cela peut être utile pour la taille de l'élément statique. Malheureusement, mes éléments doivent toujours être responsables du changement d'écran. Je ne peux donc pas accepter d'utiliser le positionnement relatif comme solution que je cherchais. Peut-être que c'était une mauvaise idée d'utiliser des DIV simples avec une largeur et une hauteur statiques pour simplement illustrer mon problème, mais merci. –

@ MartinKrajčírovič bonne chance – 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>

Essayez cette

Source

2017-07-26 11:01:58 M0ns1f

@ehsan seulement css ^^ – M0ns1f

Eh bien, cela pourrait fonctionner, mais malheureusement, je vais avoir plus de séparateurs générés en HTML/CSS et cette solution est comme un strictement fait pour un seul séparateur que vous positionnez strictement les données vers le haut et le bas. Mais merci. –

CSS survoler deux éléments différents et affecter un même élément

Répondre

Questions connexes