JQuery: Hover without un-hover

-3

Я даже заявляю, что удивлен тем, что jQuery немыслим поместить атрибут hover на элемент. Посмотрите на этом примере CSS:JQuery: Hover without un-hover

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

arn't ли лучший способ сделать это ? Глупо писать очевидные вещи.

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

источник

2009-06-14 Ivar

Вы приближаетесь к этому неправильно. Вы бы определить класс CSS, как так

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

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

источник

2009-06-14 20:00:38

Я просто в состоянии JavaScript в данный момент. И это в точности то же самое в исключении, что и вместо атрибутов стиля в классе CSS. В любом случае, спасибо. – Ivar

+10

Что означает «просто возможность Javascript»? Вы не можете использовать CSS свою страницу? Какое это смехотворное ограничение? Принятый, правильный способ делать то, что вы просите, - это именно то, что описано здесь. Беспокойство с прямыми стилями CSS вместо классов даже не нужно отдаленно для этой ситуации ... –

Он не «просто кладет атрибуты стиля в класс CSS», он ставит CSS в таблицу стилей и манипулирует классами элементов, а не его моделирование. Это называется абстракцией и экономит ваше время. Я предлагаю вам изучить некоторые передовые методы в разном стиле, поведении и содержании, помощник. –

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

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

Однако ответ Правеена - это путь, по которому можно идти.

источник

2009-06-14 20:05:29

Это больше похоже на то, что я ищу, но похоже, что он не работает? – Ivar

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

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

источник

2009-06-14 20:08:27

Точно, JQuery не волшебство. – Soviut

Я не новичок в jQuery, и я знаю, как это работает. Я имею в виду, что jQuery настолько умный во всех отношениях, кроме этой простой точки. – Ivar

@lvarska: Есть много людей, которые пытаются помочь вам практически и концептуально, но вы все равно негодуете. Что с этим? –

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

// 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

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

источник

2009-06-15 09:21:50 PatrikAkerstrand

Я посмотрю, что я могу сделать. Спасибо! – Ivar

ответ

Смежные вопросы