1

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>

1
  • can we change the order of the div? If we can there is a solution in CSS itself or we have to for jQuery. Jul 26, 2017 at 10:46

3 Answers 3

3

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>

1
  • Looks like the only right solution covering up all my needs. Code is responsive to screen change, solution not only for strict element size, not changing element order and is possible to extend the solution to more than one separator. Jul 27, 2017 at 7:32
3

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> 

1
  • This might be good for static element size. Unfortunately my elements must be always responsible to screen change. So I can not accept using relative positioning as solution I was looking for. Maybe it was bad idea to use plain DIVs with static width and height to simply ilustrate my problem, but thanks. Jul 27, 2017 at 7:21
0

.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

2
  • @ehsan only css ^^
    – M0ns1f
    Jul 26, 2017 at 11:02
  • Well this might work, but sadly I am going to have more separators generated in HTML/CSS and this solution is like a strictly made for one separator only as you are positioning data strictly to TOP and BOTTOM. But thanks. Jul 27, 2017 at 7:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.