jQuery: onmouseover ja onmouseout

Lihtsate onmouseover ja onmouseout tabeliridade (ei mingeid tabeleid enam) värvide vahetamiseks tavalise primitiivse ja talupoegliku lahenduse:

<dl onmouseover="this.style.backgroundColor='#F8F8F8';" 
onmouseout="this.style.backgroundColor='#FFF';">
	<dt>Veerg 1</dt>
	<dd class="competion">Veerg 2</dd>
	<dd class="place">Veerg 3</dd>
	<dd class="organizer">Veerg 4</dd>
</dl>

asemel kasutada hoopis jQuery pakutavat lahendust (mitme muutuva css attribuudi korral):

<dl class="row;">
	<dt>Veerg 1</dt>
	<dd class="competion">Veerg 2</dd>
	<dd class="place">Veerg 3</dd>
	<dd class="organizer">Veerg 4</dd>
</dl>


$(function() {
    $("dl.row").hover(function () {
      $(this).css({ "background": "#DFFFFF", 
		  "color": "#00a7d8","border-bottom": "1px solid #9EE9FF" });
    }, function () {
      var cssObj = {"background": "#FFF", 
		  "color": "#2C2C2C", "border-bottom": "1px solid #CBCACA" }
      $(this).css(cssObj);
    });
});

või pisut lihtsustatud varianti (ühe muutuva css attribuudi korral):

$(function() {
    $('dl.row').hover(function() {
            $(this).css("background","#DFFFFF"); }, 
       function() {
            $(this).css("background","#FFF");} );
});

Puhtam, kergem ja mugavam tunne :)
Peaks ka "Unobtrusive" olema!
Lisatud: 22.10.2008 21:44