JQuery: Hover ohne Un-Hover

-3

Ich bin sogar überrascht über jQuery's dumme Weise, ein Hover-Attribut auf ein Element zu setzen. Werfen Sie einen Blick auf dieses Beispiel CSS:JQuery: Hover ohne Un-Hover

div.test 
{ 
    width: 20px; 
    height: 20px; 
    color: #000000; 
    background: #FFFFFF; 
} 
div.test:hover 
{ 
    color: #FFFFFF; 
    background: #CC0000; 
}

Wenn wir möchten, dass dies zu jQuery konvertieren, haben wir folgendes eingeben:

$('div.test').css({ 
    'width' : '20px', 
    'height' : '20px', 
    'color' : '#000000', 
    'background' : '#FFFFFF' 
}); 
$('div.test').hover(function() { 
    $(this).css({ 
     'color' : '#FFFFFF', 
     'background' : '#CC0000' 
    }); 
}, function() { 
    $(this).css({ 
     'color' : '#000000', 
     'background' : '#FFFFFF' 
    }); 
});

arn't es einen besseren Weg, dies zu tun ? Es fühlt sich dumm an, offensichtliche Dinge zu schreiben.

Vielen Dank im Voraus.

Quelle

2009-06-14 Ivar

Sie nähern sich dem in die falsche Richtung. Sie würden eine CSS-Klasse definieren, wie so

.highlighted 
{ 
    color: #FFFFFF; 
    background: #CC0000; 
} 

$('div.test').hover(function() { 
    $(this).addClass('highlighted'); 
}, function() { 
    $(this).removeClass('highlighted'); 
});

Quelle

2009-06-14 20:00:38

Ich kann nur in diesem Moment JavaScript. Und das ist genau das Gleiche in Ausnahmefällen, dass Sie stattdessen die Stilattribute in eine CSS-Klasse eingefügt haben. Trotzdem danke. – Ivar

+10

Was bedeutet "nur Javascript"? Sie können Ihre Seite nicht CSS-fähig machen? Was für eine lächerliche Einschränkung ist das? Die akzeptierte, korrekte Art zu tun, was Sie fragen, ist genau das, was hier beschrieben wird. Herumalbern mit direkten CSS-Stilen anstelle von Klassen ist für diese Situation nicht einmal im Entferntesten erforderlich ... –

Er "setzt die Stilattribute nicht einfach in eine CSS-Klasse", er setzt das CSS in ein Stylesheet und manipuliert die Klassen des Elements statt dessen Styling. Das nennt man Abstraktion und spart Zeit. Ich schlage vor, Sie lernen einige Best Practices in der Trennung von Stil, Verhalten und Inhalt, Kumpel. –

Auch könnten Sie einfach die folgende einfache Plugin schreiben zu tun, was Sie (automatisches unhovering) wollen:

$.fn.easyHover = function(cssProps){ 
    return this.each(function(){ 
     var $t = $(this); 
     var oldProps = {}; 
     for(x in cssProps) 
      oldProps[x] = $t.css(x); 
     $t.hover(function(){ 
      $(this).css(cssProps); 
     }, function(){ 
      $(this).css(oldProps); 
     }); 
    } 
}

Sie dann es wie folgt verwenden:

$('#elem').easyHover({color:'#000', background:'#ccc'});

Aber Praveens Antwort ist definitiv der Weg zu gehen.

Quelle

2009-06-14 20:05:29

Das ist mehr wie ich suche, aber es scheint, dass es nicht funktioniert? – Ivar

Wo Sie sich irren ist im Denken jQuery versucht, CSS zu ersetzen.

jQuery fügt kein Hover-Tag hinzu, es stellt nur Handler für das Hover-Ereignis von JavaScript bereit (IIRC ist eigentlich eine Abstraktion von mouseover/mouseout). Wenn Sie den Hover-Pseudo-Selektor von CSS mit JS emulieren möchten, erleichtert jQuery Ihnen die Verwendung einer einfach zu verwendenden Event-Handler-Bindung.

Quelle

2009-06-14 20:08:27

Genau, JQuery ist keine Magie. – Soviut

Ich bin nicht neu mit jQuery und ich weiß, wie es funktioniert. Was ich meine ist, dass jQuery in jeder Hinsicht so schlau ist, außer diesem einfachen Punkt. – Ivar

@lvarska: Es gibt viele Menschen, die versuchen, Ihnen praktisch und konzeptionell zu helfen, aber Sie sind weiterhin empört. Was ist damit? –

ich einen anderen Weg nehme folgendes zu gehen wäre:

// In you stylesheet, just define the default properties 
div.test 
{ 
    width: 20px; 
    height: 20px; 
}

Dann machen Sie ein einfaches Objekt-Wrapper um die Eigenschaften, die Sie

var hoverHelper = (function() { 
    var styles = { 
     hoverStyle: { 
     'color' : '#FFFFFF', 
     'background' : '#CC0000' 
     }, 
     defaultStyle: { 
     'color' : '#000000', 
     'background' : '#FFFFFF' 
     } 
    }; 

    return { 
     init: function (selector) { 
     $(selector).hover(
      function() { 
       $(this).css(styles.hoverStyle); 
      }, 
      function() { 
       $(this).css(styles.defaultStyle); 
      } 
     ); 
     } 
    }; 
}()); 

hoverHelper.init('.hoverElementClass'); // Apply the hover functions 
             // to all matching elements

diese Weise zumindest die Sie verwenden möchten, halten Bewahren Sie die Stildefinitionen an einem Ort auf.

Quelle

2009-06-15 09:21:50 PatrikAkerstrand

Ich werde sehen, was ich tun kann. Vielen Dank! – Ivar

JQuery: Hover ohne Un-Hover

Antwort

Verwandte Themen