преобразование css hover в jquery hover

StackOverflow https://stackoverflow.com/questions/1851141

  •  13-09-2019
  •  | 
  •  

Вопрос

Я создаю веб-сайт с эффектами наведения курсора мыши.Видишь http://vitaminjdesign.com/index.html и посмотрите на раздел услуг в правом нижнем углу.Я использую: наведите курсор мыши, чтобы изменить цвет фона.Я хочу использовать jquery для достижения того же результата с элегантным исчезновением.Вот мой html-код:

<div class="iconrow">
   <a href="#"><img src="images/icon1.png" border="0" width="35" />
   <h2>Website Design</h2></a>
</div>

(повторяется 6 раз с разными изображениями и текстом)

В принципе, когда .iconrow переносится, я хочу, чтобы фон изменился с none на background-color:#cccccccc;и когда он откатывается, возвращается к нулю.

Это было полезно?

Решение

Примечание:Я создал и протестировал свое решение с помощью Firebug для работы по предоставленной вами ссылке.Если вы выполните эти шаги по порядку, у вас должно получиться, что он полностью работает

Вы не сможете анимировать из transparent к цвету, за исключением Safari и Firefox 3.5 и других браузеров, поддерживающих цвета фона RGBA.Если вы ищете кроссбраузерную поддержку, то я бы решил проблему следующим образом:

1. Область действия ваших эффектов наведения по умолчанию ограничена классом, отличным от js, поэтому :hover эффекты будут работать как запасной вариант.Отличный способ сделать это заключается в следующем:

<html class="no-js">
   <head>
     .... meta, title, link tags ...
     <script type="text/javascript">document.documentElement.className = "js";</script>
     .... other scripts ...
   </head>

Это меняет no-js Для js еще до того, как страница отобразится.

2. Используйте jQuery для добавления фиктивных элементов рядом с вашим a теги (js добавить фиктивный элемент можно на шаге 3)

Вот CSS для использования:

.js .iconrow { background: none !important } /* Hide current hover effect */

.iconfader {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #ccc;
  z-index: 5;
}

.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */

3. Постепенно исчезает новый фиктивный элемент на mouseenter и mouseleave

$('.iconrow').each(function(){
   var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
   $(this).hover(function(){
       $span.stop().animate({opacity: 0.8}, 200);
   }, function(){
       $span.stop().animate({opacity: 0.0}, 200);
   });
});

Наконец, будьте осторожны, если вы решите использовать фон изображения вместо сплошного цвета.IE7 и IE8 не могут изменять непрозрачность 24-битных файлов PNG.Это полностью портит прозрачность.

Другие советы

Вам понадобится плагин цветовой анимации jquery: http://plugins .jquery.com/project/color

И затем какой-нибудь код, подобный этому

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

Редактировать:

Согласно комментарию dcneiner , если вы хотите, чтобы конечный цвет был none , вам нужно было бы добавить функцию обратного вызова к анимации, чтобы изменить цвет на "none" после завершения анимации.Я предполагаю, что анимация на "none" не определена.Вы можете изменить #fff на цвет, близкий к вашему фону, чтобы сгладить окончательный переход.

Анимированная подпись - это:

animate(params, [duration], [easing], [callback])
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top