S hover spreminjati drug div js

3 naročniki

Tole mi je danes žrlo živce.
Imam takole:

<div class="wrap">
<figure class="featured-thumbnail thumbnail th1">img</figure>
<figure class="featured-thumbnail thumbnail th2">img</figure>
</div>
<ul class="seznam">
<li class="item1">list</li>
<li class="item2">list</li>
</ul>

V css je opacity za th

.thumbnail {opacity:0}

Rad bi:
S hover na item1, se spremeni opacity za th1 in tako naprej za vse li in th.

S siblingi in css žal ne gre, ker si elementi ne sledijo. Torej kak js.

Takole ? (z miško se premakni nad Item 1, Item 2, Item 3)

http://jsfiddle.net/qs4ddtau/

Na tak način ja. Ampak nikakor ne morem to aplicirat na moj primer.
To je komplet koda. Kakorkoli obrnem js, mi ne deluje.

<div class="showcase-wrap">
<div class="image-wrap">
<figure class="featured-thumbnail thumbnail th1"><img src="images/vsebina/1-214x379.jpg" alt="CUSTOMER SERVICE" /></figure>
<figure class="featured-thumbnail thumbnail th2"><img src="images/vsebina/2-214x379.jpg" alt="TEMPLATES" /></figure>
<figure class="featured-thumbnail thumbnail th3"><img src="images/vsebina/3-214x379.jpg" alt="DOMAINS" /></figure>
<figure class="featured-thumbnail thumbnail th4"><img src="images/vsebina/4-214x379.jpg" alt="Amazing style" /></figure>
<figure class="featured-thumbnail thumbnail th5"><img src="images/vsebina/5-214x379.jpg" alt="Configuration" /></figure>
<figure class="featured-thumbnail thumbnail th6"><img src="images/vsebina/6-214x379.jpg" alt="Analytics" /></figure>
</div>

<ul class="posts-grid row showcase ul-item-0">
<li class="col-md-6 list-item-1 active">
<div class="desc">
<h5><a title="CUSTOMER SERVICE" href="customer-service/">CUSTOMER SERVICE</a></h5>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic...</p>
</div>
</li>
<li class="col-md-6 list-item-2">
<div class="desc">
<h5><a title="TEMPLATES" href="templates/">TEMPLATES</a></h5>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic...</p>
</div>
</li>
</ul>
<ul class="posts-grid row showcase ul-item-1">
<li class="col-md-6 list-item-1">
<div class="desc">
<h5><a title="DOMAINS" href="omains/">DOMAINS</a></h5>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic...</p>
</div>
</li>
<li class="col-md-6 list-item-2">
<div class="desc">
<h5><a title="Amazing style" href="amazing-style/">Amazing style</a></h5>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic...</p>
</div>
</li>
</ul>
<ul class="posts-grid row showcase ul-item-2">
<li class="col-md-6 list-item-1">
<div class="desc">
<h5><a title="Configuration" href="configuration/">Configuration</a></h5>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic...</p>
</div>
</li>
<li class="col-md-6 list-item-2">
<div class="desc">
<h5><a title="Analytics" href="analytics/">Analytics</a></h5>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic...</p>
</div>
</li>
</ul>
</div>

Težava pa je še v tem, da bi moral biti prvi active li takoj viden.

Prilepi še javascript. Brez tega je težko karkoli ugotovit. Kako pa poveš kater <li> je povezan s katerim figurjem ? Si videl data-figure atribut v primeru zgoraj ? Preko tega povemo kater figure je povezan na kater <li>. Potem pa v JS vzamemo ta atribut od trenutnega <li> in elementu preko animacije spremenimo opacity.

Tole bi bil js

$('.posts-grid.showcase').wrapAll('<div class="showcase-wrap"></div>');
    $('.showcase-wrap').prepend('<div class="image-wrap"></div>');

    var i = 1;
    $('.posts-grid.showcase li').each(function(){
        $(this).attr('item', 'item-'+i).find('.thumbnail').clone().appendTo('.showcase-wrap .image-wrap').attr('item', 'item-'+i);
        i++;
    });

    $('.showcase-wrap').find('[item="item-1"]').addClass('active');

    $('.posts-grid.showcase li').hover(function(){
        $('.showcase-wrap .image-wrap .thumbnail').removeClass('active');

        var hovered_item = $(this).attr('item');
        $('.showcase-wrap .image-wrap').find('[item="'+hovered_item+'"]').addClass('active');
    })

S tem sem hotel v bistvu premeščat figure element iz li v zgornji image-wrap div.

Sem pa bolj slab v js, tak da sem verjetno precej mimo pihnu:)

Zakaj tolk komplicianja ? Predlagam da na novo zastaviš html + js. Atribute in div wrapperje dodaj že v generiranju HTML-ja, in si poenostavi JS.

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.

Theuros, če pogledaš moj jsfiddle, sem mu ravno to sprogramiral :)

Cruiser => ja sem videl da si mu podal delujoč primer. Jaz sem razložil malo bolj step by step da bo avtor razumel in ne samo prepisal.

Gotcha :)

Eh jaz kekec :)
Tole mi je manjkalo jQuery(document).ready(function()

Hvala obema za potrpljenje;)