Image selection when you hover text and vice versa

Question

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.

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

Accepted Answer · 2015-10-25T21:03:27

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?
I suppose that the script code is placed in the <script> tags ... Or jquery not connected. I need an error that is issued.
damn, well, everything seems to be checked ... can I contact you somehow?
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;

Image selection when you hover text and vice versa

1 answer 1

More articles: