Klicken Sie auf die Jquery-Schaltfläche, um das Implementierungsprinzip und code_jquery automatisch hervorzuheben

Tatsächlich ist das Prinzip sehr einfach. Wenn wir klicken, fügen wir dem Element ein benutzerdefiniertes Attribut hinzu. Nach dem Hinzufügen wird ein passender Stil angezeigt, der sich automatisch an den Hintergrund anpasst in den ursprünglichen Zustand zurückversetzen

Erweitern Sie zunächst eine Methode hoverEl in Ihrem eigenen js

Kopieren Sie den Code Der Code ist wie folgt folgt:

$ .extend($.fn, {
hoverEl:function(){

var _this = $(this);
var _t = setTimeout (function(){
_this.attr( "hover", "on");
}, 10);
_this.attr("hoverTimeout", _t); (function(){
clearTimeout( _this. attr("hoverTimeout") );
var _t = setTimeout(function(){
_this.removeAttr("hover");
}, 100 );
_this.attr("hoverTimeout" , _t);

}
}; Zweitens definieren Sie den Stil , wenn ein bestimmtes Attribut hinzugefügt wird

Code kopieren

Der Code lautet wie folgt: li[ hover=on]{ background-image:-webkit- gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important; : -webkit-linear-gradient(top, #4286F5, #194FDB )!important; color: white!important; cursor: pointer!important; Aufrufbeispiel:

Code kopieren


Der Code lautet wie folgt:

$(e.target) .hoverEl();