This question is an exact duplicate:

How to hover styles on .work__2 when hovering over .photo__2 ?

With the help of anything (if anyone knows about the existence of a special plug-in for such things, then please share)?

 .photo { float: left; } .photo__1 { width: 300px; height: 100px; background: red; margin: 10px; } .photo__2 { width: 300px; height: 100px; background: yellow; margin: 10px; } .photo__3 { width: 300px; height: 100px; background: green; margin: 10px; } .carrer { float: left; } .work__1 { width: 100px; height: 100px; background: red; margin: 10px; } .work__2 { width: 100px; height: 100px; background: yellow; margin: 10px; } .work__3 { width: 100px; height: 100px; background: green; margin: 10px; } 
 <div class="photo"> <div class="photo__1"></div> <div class="photo__2"></div> <div class="photo__3"></div> </div> <div class="carrer"> <div class="work__1">work 1</div> <div class="work__2">work 2</div> <div class="work__3">work 3</div> </div>

Reported as a duplicate by participants Alexey Shimansky , Air , Grundy javascript Jan 2 '18 at 11:17 .

This question has been marked as a duplicate of an existing one.

  • one css - in any way, since the necessary selectors are missing - Grundy
  • I already vkurse. I just need so that when you hover on one element, the picture in another element changes. Ate through CSS display: none; display: block; it turns out only if they have one parent. - Marian Vytak
  • Do you want to do all this on css ? - Raz Galstyan
  • No, you can use anything. - Marian Vytak

3 answers 3

Here using jquery . Add or remove a class to the desired item. And in the css element with this class we give the property we need. But in order to make life easier for us, you can also add data-photo attributes to the elements with the work class and register the necessary elements with the photo class in them. Those that should hover. And so the js implementation is easier.

 $(document).ready(function(){ $('.carrer>div').on('mouseover', function(){ $('.'+$(this).data('photo')).addClass('active'); }).on('mouseout', function(){ $('.'+$(this).data('photo')).removeClass('active'); }); }); 
 .photo { float: left; } .photo__1 { width: 300px; height: 100px; background: red; margin: 10px; } .photo__2 { width: 300px; height: 100px; background: yellow; margin: 10px; } .photo__3 { width: 300px; height: 100px; background: green; margin: 10px; } .carrer { float: left; } .work__1 { width: 100px; height: 100px; background: red; margin: 10px; } .work__2 { width: 100px; height: 100px; background: yellow; margin: 10px; } .work__3 { width: 100px; height: 100px; background: green; margin: 10px; } .photo>div.active{ border-radius: 20px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="photo"> <div class="photo__1"></div> <div class="photo__2"></div> <div class="photo__3"></div> </div> <div class="carrer"> <div class="work__1" data-photo="photo__1">work 1</div> <div class="work__2" data-photo="photo__2">work 2</div> <div class="work__3" data-photo="photo__3">work 3</div> </div>

  • Thanks, that is necessary. - Marian Vytak

Option using the element index inside the block

 $(".carrer").on("mouseenter mouseleave", ">", function(event) { var indx = $(this).prevAll().length; $(".photo>").eq(indx).toggleClass("active", event.type == "mouseenter"); }) 
 body { display: flex; } .carrer, .photo { display: flex; flex-direction: column; } .block>div { width: 300px; height: 100px; margin: 10px; transition: .8s; box-sizing: border-box; } .carrer>div { width: 100px; } .block>div:nth-child(1) { background-color: red; } .block>div:nth-child(2) { background-color: yellow; } .block>div:nth-child(3) { background-color: green; } .block>div.active { border: 4px solid rgba(139, 69, 19, 1); border-radius: 12px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="photo block"> <div></div> <div></div> <div></div> </div> <div class="carrer block"> <div>work 1</div> <div>work 2</div> <div>work 3</div> </div>

    Guys, thank you all. Made that way. Works like clockwork.

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="photo"> <div class="photo photo__1 active"></div> <div class="photo photo__2"></div> <div class="photo photo__3"></div> </div> <div class="carrer"> <div class="work work__1" data-photo="photo__1">work 1</div> <div class="work work__2" data-photo="photo__2">work 2</div> <div class="work work__3" data-photo="photo__3">work 3</div> </div> .photo { float: left; } .photo__1 { width: 300px; height: 100px; background: red; margin: 10px; display: none; } .photo__2 { width: 300px; height: 100px; background: yellow; margin: 10px; display: none; } .photo__3 { width: 300px; height: 100px; background: green; margin: 10px; display: none; } .carrer { float: left; } .work__1 { width: 100px; height: 100px; background: red; margin: 10px; } .work__2 { width: 100px; height: 100px; background: yellow; margin: 10px; } .work__3 { width: 100px; height: 100px; background: green; margin: 10px; } .active{ display: block; } $(document).ready(function(){ $('.work').on('mouseover', function(){ $('.photo').removeClass('active'); $('.'+$(this).data('photo')).addClass('active'); }); });