При наведении курсора, изменение цвета и обратно

У меня есть кнопка, что я пытаюсь создать, где, когда кто-то парит над ним, я хочу следующее действие произойдет ->При наведении курсора, изменение цвета и обратно

В то время как парит 1) Цвет исчезает в другом 2) Разный цвет исчезает в первый цвет

Фокус в том, что я хочу, чтобы угасание произошло во время состояния зависания, а не тогда, когда пользователь ушел от кнопки.

Второй трюк в том, что я, чтобы достичь формы, у меня довольно много пограничных манипуляций, и я бы тоже хотел, чтобы они тоже изменились.

Вот jsfiddle кнопки ->http://jsfiddle.net/88B3e/1/

HTML-->

<a href="#" class="more"> 
    <span class="triangle1"></span> 
    <span class="thoughts">thoughts?</span><span class="triangle"></span> 
</a>

CSS-->

.triangle1 { 
    float: left; 
    font-size: 0px; 
    line-height: 0%; 
    width: 0px; 
    border-top: 12px solid #de8063; 
    border-bottom: 12px solid #de8063; 
    border-right: none; 
    border-left: 12px solid #f5f3f0; 
} 
.thoughts { 
    float: left; 
    background-color: #de8063; 
    padding: 3px 2px 2px 4px; 
    color: #f0dfd8; 
    font-family: 'PT Sans'; 
    font-size: 14px; 
    text-align: center; 
    font-weight: 300; 
} 
.triangle { 
    float: left; 
    font-size: 0px; 
    line-height: 0%; 
    width: 0px; 
    border-top: 12px solid #f5f3f0; 
    border-left: 12px solid #de8063; 
    border-bottom: 12px solid #f5f3f0; 
}

Ваш мудрый совет крайне необходим :) ,

Приветствия, Степан

источник

2013-05-27 Stepan Parunashvili

** Хитрость заключается в том, что, хотя я хочу замирания обратно произойти во время состояния парения, а не тогда, когда пользователь Мышки прочь от кнопки. ** Я не получил это утверждение, вы хотите вызвать мышь и мышь вручную? – dreamweiver

Hey Dreamweiver, спасибо, что нашли время, чтобы прочитать это! Я имею в виду, что когда человек нависает над элементом, в течение этого промежутка времени я хотел бы, чтобы другой цвет исчезал и исчезал. Обычно он будет исчезать только после того, как человек отталкивает мышь :). –

Используйте событие .mouseover. Затем затухайте в течение x времени, а затем исчезните. Какой цвет вы хотите, чтобы кнопка стала? –

Попробуйте это, я сделать это с помощью JQuery и CSS3

$(document).ready(function(){ 
    $('.more').hover(function(){ 
     $(this).addClass('moreHover'); 
     setTimeout(function(){ 
     $('a.more').removeClass('moreHover');}, 3000); 
    }); 

});

working File

источник

2013-05-27 10:12:59

Thanks Sonasish! Это отлично работает. Марк, Dreamweiver, Райан, большое спасибо за то, что он подтолкнул меня в правильном направлении. –

Я рад, что вам понравилось :) –

использование

.thoughts:hover{ 
    color:#bc9c00; 
    transition:.85s; 
}

, и он будет работать propperly.

Если вы хотите вернуть шанс цвета во время зависания, вам нужно получить какое-то событие mouseover. Я не очень часто встречаюсь с этим, поэтому не могу помочь вам в этом!

источник

2013-05-27 10:07:06

Я действительно должен сказать, что выбранный вами цвет не очень читабельен, идите по пути более светлого цвета или более темного цвета. Что-то вроде этого ?: FFcfba51 –

При наведении курсора, изменение цвета и обратно

ответ

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