There is a list and there are pictures (photos).

.fl { float: left; } .fr { float: right; } h1 { color: #6c0092; font-size: 40px; font-weight: 100; line-height: 50px; } h2 { color: black; font-size: 40px; font-weight: 600; line-height: 50px; } .list-win { width: 332px; height: 782px; background-color: #f3f3f3; padding-top: 44px; padding-left: 41px; } .list-win li { list-style-type: none; color: #4a4a4a; font-size: 22px; font-weight: 200; line-height: 25px; padding-bottom: 18px; } .list-win li:hover { color: #ff001f; text-decoration: underline; } .photoWin { padding: 10px; width: 720px; height: 771px; } .photoWin img:hover { border: 5px solid #ff001f; box-sizing: border-box; } 
 <div class="section-1"> <div class="list-win fl"> <li>Stephen Aguilar</li> <li>Juan Owens</li> <li>James Foster</li> <li>Kenneth Welch</li> <li>Cheryl Young</li> <li>Bruce Hill</li> <li>Jean Alexander</li> <li>William Howard</li> <li>Brian Jenkins</li> <li>Christian Harris</li> <li>Christina Medina</li> <li>Nancy Rivera</li> <li>Brian Jenkins</li> <li>Christian Harris</li> <li>Christina Medina</li> <li>Nancy Rivera</li> </div> <div class="fr"> <h2>ΠžΠΊΡ‚ΡΠ±Ρ€ΡŒ</h2> <div class="photoWin"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/150/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/150/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/150/150/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/150/100/" height="140"> <img src="http://lorempixel.com/100/150/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> <img src="http://lorempixel.com/100/100/" height="140"> </div> </div> </div> 

It is necessary to make so that when we hover the cursor on the name-1 in the list on the left on the photo-1 a red border appears and vice versa we point to the photo-2 the border appears and the name-2 is highlighted.

subject

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

jquery solution If you know pure javascript then no problem will translate.

So. To begin with, you need to add more rules for active images and links in css in order not to change the properties of the script. Those. instead

 .list-win li:hover { color: #ff001f; text-decoration: underline; } .photoWin img:hover { border: 5px solid #ff001f; box-sizing: border-box; } 

will be

 .list-win li:hover, .list-win li.active{ color: #ff001f; text-decoration: underline; } .photoWin img:hover, .photoWin img.active { border: 5px solid #ff001f; box-sizing: border-box; } 

Next, for all li you need to add the data attribute. Of course, for each unique.

  <li data-link-id="1">Stephen Aguilar</li> <li data-link-id="2">Juan Owens</li> <li data-link-id="3">James Foster</li> ... // ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅ 

for all pictures also add data with exactly the same number as the li element with which the picture is associated

 <img data-img-id="1" src="http://lorempixel.com/100/100/" height="140"> <img data-img-id="2" src="http://lorempixel.com/100/100/" height="140"> <img data-img-id="3" src="http://lorempixel.com/100/100/" height="140"> ... // ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅ 

Please note that li data-link-id attribute, and li data-img-id attributes. Although it does not matter. The main thing is to match the numbers.

Next, the script code:

 // ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ li $(document).on('mouseover', '.list-win li', function(){ var id = $(this).data().linkId; $('.photoWin img[data-img-id=' + id +']').addClass('active'); }); // ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ $(document).on('mouseover', '.photoWin img', function(){ var id = $(this).data().imgId; $('.list-win li[data-link-id=' + id +']').addClass('active'); }); // сброс css Π½Π° Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΉ, Ссли ΠΌΡ‹ΡˆΠΊΡƒ ΡƒΠ±Ρ€Π°Π»ΠΈ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ»ΠΈ ссылки $(document).on('mouseout', '.list-win li, .photoWin img', function(){ $('.photoWin img').removeClass('active'); $('.list-win li').removeClass('active'); }); 

What's going on here. When you hover over a link, its data attribute is taken, its number is read, and the active class previously registered in css is added to the picture with the same number.

The same with the pictures, but in the opposite direction.

Well, when you remove the mouse from the elements - all classes are removed


There is a simpler way, but (!!!) provided that all the links on the left will be located exactly in the same sequence as the corresponding pictures

  • Unfortunately, it did not start, maybe I'm doing something wrong? - kaktyc
  • @kaktyc possible. I am not a mind reader Β―_ (ツ) _ / Β―. I suppose that the script code is placed in the <script> tags ... Or jquery not connected. I need an error that is issued. Code 100% working - Alexey Shimansky
  • damn, well, everything seems to be checked ... can I contact you somehow? - kaktyc
  • What you specifically fail? What are you doing? And what errors does the console show? jquery connect or not? ... chatting in chat. - Alexey Shimansky
  • jquery connected <script src = " ajax.googleapis.com/ajax/libs/jquery/1.11.3/… >; In the console:" Failed to load resource: net :: ERR_FILE_NOT_FOUND index.html: 87 Uncaught ReferenceError: $ is not defined index.html: 102 Uncaught ReferenceError: $ is not defined main.js: 2 Uncaught TypeError: $ (...). collagePlus is not a function; - kaktyc