Lahko ti ponudim rešitev za tvoj primer vendar potem boš pripodobnem primeruspet spraševal osnove. Za tvojo zadvo se da rešit precej enostavno, sploh pa z jquery.
Glede na dani primer. Prvo moraš izbrati elemente kateri bodo zaznali hover in nato spremenit ustrezen element.
Prvo izbereš vse elemente iz "seznam" tako da uporabiš $(".seznam li") nato dodaš funkcijo hover, tako da izgleda vse skupaj tako:
$(".seznam li").hover(function() {
// to se zgodi ko gremo z miško prek LI
}, function() {
// to pa ko gremo dol iz LI
});
prvi del je končan ... sedaj moraš samo še dodat opacity ustreznemu elementu znotraj classa "wrap"
Nekako moraš povezati kateri LI sproži kateri Figure in glede na to da že imaš classe item1 in th1 bi lahko naredil tako da bi izluščil številko 1 in "item1" insprožil class th1. Drugi način je da pogledaš kateri index ima trenutni LI in in le tega uporabiš za povezat z thX ... pa uporabili bomo tretji način je da dodamo še en parameter da ne bomo povezali elemente... tako da:
vsem <li class="item2">list</li> dodaj še attribut data-no="2" tako da bo <li class="item2" data-no="2">list</li> =>("no" = poljubno ime)
zdaj samo moraš prebrati ta attribut znotraj prejšne hover funkcije in apicirat na figure:
Preberemo iz trenutnega hoverja zabeleženo številko
var no = $(this).attr("data-no";)
sedaj ko imamo v spremenljivki "no" številko le to uporabimo za dodat opacity na one figure na sledeči način:
$(".wrap .th"+no).css("opacity",1);
seveda v hoverju v drugo funkcijo naredimo obratno. Seveda lahko uporabiš še kak animate za lepši efekt. Namesto da spreminjaš direktno css lahko vežeš dodaten class on hover z addClass funkcijo...
možnosti je precej....
Upam da sem bil dovolj jasen da boš le to aplicral na svojo kodo.