jQuery un CSS hover

[ArnisR]

Tātad ir šads CSS kods:

 

li.klase{background:gray;}

li.klase:hover{background:black;}

 

Ja ar peli uzbrauc uz .klase elementa, tad tas iekrāsojas melns.

 

 

Nospiežot pogu vajag panākt, lai elementam .klase tiek piemēroti :hover state stili (melna krāsa), tāpat kā tas notiek uzbraucot ar peli:

 

$('button').click(function(){

 

li.klase:hover;

 

});

 

Vārdu sakot, jāaktivizē :hover's , bez uzbraukšanas ar peli...

Kā tas būtu izdarāms?! Paldies!

Edited May 28, 2011 by ArnisR

[Rincewind]

li.klase:hover,li.klase2{background:black;}

 

$('button').click(function(){

$('li.klase').addClass('klase2');

});

[ArnisR]

li.klase:hover,li.klase2{background:black;}

 

$('button').click(function(){

$('li.klase').addClass('klase2');

});

 

Šis variants nestrādā, ja li elementam jau iestatīta background vērtība.

[briedis]

Kā viņa ir iestatīta? Nu tad noņem viņu! Vai arī klase2 norādi specifiskāku selektoru, lai tas "overraido" to esošo.

 

Izlasi, noderēs: http://www.webteacher.ws/2008/05/19/tip-calculate-the-specificity-of-css-selectors/

[daGrevis]

Nu CSS jau tas neko nemaina...

 

.foo { background: red; }
.foo { background: green; }
.foo { background: blue; }

 

.foo būs zilā krāsā.

[Rincewind]

Šis variants nestrādā, ja li elementam jau iestatīta background vērtība.

$('li.klase').removeClass('klase1').fadeIn().fadeOut().hide().show().addClass('klase2');

[briedis]

$('li.klase').removeClass('klase1').fadeIn().fadeOut().hide().show().addClass('klase2');

 

Tas ir nopietni vai joks? :D

[foxsk8]

Reāli jau tur būtu šādi

 

li {background:#ccc;}
li:hover {background:#000;}
li.active (background:#000;)

 

un tālāk jau

 

/// visiem selektora li elementiem

 

$('.selektors').click(function() { 
   $('li').addClass('active'); 
});

 

vai arī

 

/// Konkurētam elementam

 

$('li').click(function() { 
   $(this).addClass('active'); 
});

 

vēl jau var šitā arī, ka piem li ir savā krāsa, hovers savā un active savā

 

li {background:#ccc;}
li:hover {background:#000;}
li.active (background:#333;)
li.active:hover {background:#333;} // Lai nemaina hoveri aktīvam li //

Edited May 28, 2011 by foxsk8

[daGrevis]

li.active:hover

 

Nezināju, ka tā var darīt... Paldies.

[briedis]

li.active:hover

 

Nezināju, ka tā var darīt... Paldies.

 

Visādi var darīt :)

 

li.active.red:hover span.box{
display:block;
}

 

šeit, piemēram, tiks parādīts span elements, kas atrodas iekš li, uz kura ir uzbraukts virsū, un kam ir gan active, gan red klase.

 

<li class="active red"><span class="box">teksts</span></li>