CODEWITHSUNDEEP
javascriptjquerycsshoverelement
Martin Krajčírovič
Martin Krajčírovič

Reputation: 642

CSS hover over two different elements and affect one same element

Is there a way on hover two divs to affect one div different ways? The best be to know the solution in CSS way, but if there is no CSS way then I am open to JQuery or Javascript way.

For example when I hover over div myData1, then I affect separator to have some style. And when I hover over div myData2, then I affect separator to be in any other unique way.

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

Upvotes: 1

Views: 1136

Answers (3)

Ehsan
Ehsan

Reputation: 12951

Just with 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>

Upvotes: 3

M0ns1f
M0ns1f

Reputation: 2725

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

Try this

Upvotes: 0

Johannes
Johannes

Reputation: 67748

Using jQuery, this would be a 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>

Upvotes: 3

Related Questions