Ефект зникнення при наближенні посилання?


134

на багатьох сайтах, таких як http://www.clearleft.com , ви помітите, що коли посилання наближаються, вони стануть іншим кольором на відміну від негайного перемикання, дії за замовчуванням.

Я припускаю, що для створення цього ефекту використовується JavaScript, хтось знає як?


1
Дякую. Тепер я розумію, як зробити наведення курсора, я просто намагаюся розібратися, як створити більш плавний ефект для своїх курсорних посилань.
Майлз Генріхс

Відповіді:


327

В даний час люди просто використовують переходи CSS3, тому що це набагато простіше, ніж возитися з JS , підтримка браузера є досить хорошою і просто косметичною, тому не має значення, якщо це не працює.

Щось подібне робить роботу:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

Ви також можете переходити певні властивості CSS з різними функціями синхронізації та полегшення, розділяючи кожну декларацію комою, наприклад:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

Демо тут


@AndreiCristof: Хоча на щастя працює в IE10 ! Не потрібен також префікс постачальника (що дивно).
Марсель

Я перевірив і те, і я сподіваюся, якщо я знайшов правильну причину того, що шлях CSS не є рівним і вільним, як спосіб jQuery. Будь ласка, виправте мене, якщо я помиляюся.
QMaster

Ти рок! Добре пояснено, багато мені допомогло, побачивши це.
plast1K

Мій тест - із зображенням, а не посиланням.
Феліпе

@FelipeMicaroniLalli найкраще опублікувати питання, я думаю, безумовно, звучить як синтаксична проблема.
Марсель

9

Я знаю, у вашому питанні "Я припускаю, що JavaScript використовується для створення цього ефекту", але CSS також можна використовувати, наведений нижче приклад.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

HTML

<a class="fancy-link" href="#">My Link</a>

І ось JSFIDDLE для вищевказаного коду!


Марсель в одній з відповідей вказує, що ви можете "переходити декілька властивостей CSS", ви також можете використовувати "всі", щоб впливати на елемент усіма вашими стилями: наведіть курсор, як показано нижче.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

HTML

<a class="fancy-link" href="#">My Link</a>

І ось JSFIDDLE для прикладу "всі"!


6

Ви можете зробити це за допомогою JQueryUI:

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/


для цього вам не потрібні jqueryui, просто jquery
Хуан

6
@Juan Ні, jQuery може анімувати лише "єдині числові значення", яких кольорів немає (див. Api.jquery.com/animate/#animation-properties ). Але вам фактично не потрібна вся бібліотека jQueryUI, лише плагін jQuery.Color, який, як буває, вбудований у jQueryUI.
Ніклас Салін

@Niclas Sahlin Я знайшов вашу скрипку в пошуку переходів CSS. Ваш перехід JQuery-інтерфейс настільки плавніший, я впевнений, що користувачі це помітять.
RubyRube

1
Є рішення з css, що легше реалізувати
Менькель

2

Спробуйте це у своєму css:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.