JQuery: зависать без отскока - PullRequest
Новая
       13

JQuery: зависать без отскока

0 голосов
/ 14 июня 2009

Я даже удивлен тем, что jQuery делает глупый способ поставить атрибут hover на элемент. Взгляните на этот пример CSS: 

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

Если мы хотим преобразовать это в jQuery, мы должны ввести следующее: 

$('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'
   });
});

Нет ли лучшего способа сделать это? Писать очевидные вещи глупо.

Заранее спасибо.

Ответы [ 4 ]

15 голосов
/ 15 июня 2009

Вы подходите к этому неправильно. Вы бы определили класс CSS следующим образом 

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

$('div.test').hover(function() {
    $(this).addClass('highlighted');
}, function() {
    $(this).removeClass('highlighted');
});
3 голосов
/ 15 июня 2009

Когда вы ошибаетесь, jQuery пытается заменить CSS.

jQuery не «добавляет тег наведения», он просто предоставляет обработчики для события наведения JavaScript (на самом деле IIRC - это абстракция mouseover / mouseout). Если вы хотите эмулировать псевдоселектор CSS при помощи JS, jQuery облегчит вам задачу, предоставив простую в использовании привязку обработчика событий.

3 голосов
/ 15 июня 2009

Также вы можете просто написать следующий простой плагин, чтобы делать то, что вы хотите (автоматическое отображение): 

$.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);
       });
   }
}

Вы можете использовать его так: 

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

Тем не менее, ответ Правина - это верный путь.

2 голосов
/ 15 июня 2009

Полагаю, другой путь был бы следующим: 

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

Затем создайте простую обертку для объектов, содержащую свойства, которые вы хотите использовать 

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

Таким образом, по крайней мере, вы храните определения стилей в одном месте.

...