Как установить эффект выцветшего наведения на кнопку?

На многих сайтах, таких как http://notes.envato.com/, вы заметите, что когда ссылки зависнут, они будут исчезать в другом цвете, а не сразу же переключать действие по умолчанию. Как это сделать ?Как установить эффект выцветшего наведения на кнопку?

Я попытался HTML:

<ul class="icons"> 
    <li class="flickr"> 
     <a href="http://flickr.com/photos/we-are-envato" rel="external" title="Flickr"> 
      <img src="img/flickr.png" target="_blank"> 
     </a> 
    </li> 
</ul>

CSS:

ul.icons { 
    position: absolute; 
    top: 95px; 
    right: 0; 
    z-index: 100; 
} 

li { 
    display: inline; 
    padding: 5px; 
} 

li a { 
    list-style: none; 
    text-decoration: none; 

} 

li.flickr a { 
    height: 50px; 
    width: 50px; 
} 

li.flickr a:hover { 
    color: #A5BA84; 
}

Может кто-нибудь сказать мне, как установить эффект?

источник

2013-07-04 Badiul Alam

Вам понадобится использовать CSS для перехода на привязку. Вот пример:

/* replace 0.5s in each one with the time you want it to take */ 
a { 
    text-decoration: none; 
    color: #007edf; /* starting color */ 
    transition: color 0.5s ease; 
    -webkit-transition: color 0.5s ease; 
    -moz-transition: color 0.5s ease; 
    -o-transition: color 0.5s ease; 
    -ms-transition: color 0.5s ease; 
} 

a:hover { 
    color: #0069ba; /* ending color */ 
}

источник

2013-07-04 13:27:51

это выигрыш работы смотрите здесь: http://jsfiddle.net/kM6uD/ –

@MohammadAreebSiddiqui Да это делает, это трудно понять, но синий немного темнеет, потому что это два указанных цвета; светло-голубой и слегка темновато-синий. Попробуйте изменить цвет a: hover на # 000, и вы увидите, что он делает переход так, как должен. –

@ javadog36 Большое спасибо. Работает ! –

Как объяснено пользователем javadog36, вы можете сделать это с помощью CSS-level3 собственности «переход».

Кроме того, в этом ответе от abody97 по почти тому же вопросу (Fade on hover text link color) они предлагают решение javascript (jquery).

Будьте осторожны, когда приходит время, чтобы выбрать решение (css || javascript). Согласно caniuse.com (http://caniuse.com/#search=transition), глобальная поддержка: 78,47%

я один из тех, кто считает, что решение JQuery более «кросс-браузер» на данный момент.

Blockquote:

Вы либо должны оживить цвета после того, как вы включите JQuery UI (или JQuery цвет):

$('a').hover(
    function() { $(this).animate("color", "#FFFFFF"); }, 
    function() { $(this).animate("color", "#000000"); } 
}

Или использовать CSS3 переходы (избегая JQuery вообще):

a { 
    color: #000000; 
    -moz-transition: 1s color; /*For Firefox < 16.0*/ 
    -webkit-transition: 1s color; /*For WebKit (Chrome, Safari)*/ 
    transition: 1s color; /*animates for 1 second*/ 
} 
a:hover { 
    color: #FFFFFF; 
}

Однако поддержка переходов CSS3 ограничена; он не поддерживается в IE < = 9 (хотя он поддерживается в скороходном IE10).

ответил 23 '12 Сен в 9:39 Abody97

источник

2013-07-04 13:43:12

Спасибо за помощь. Я пробовал с свойствами перехода css3 и работал нормально :) –

@BadiulAlam -> http://caniuse.com/#search=transition (глобальная поддержка: 78,47%) –

Как установить эффект выцветшего наведения на кнопку?

ответ

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