Наведите указатель мыши на фигуру и измените подпись подписи?

Я следую этому руководству: http://tympanus.net/codrops/2013/06/18/caption-hover-effects/. Вступая в это шаг за шагом, поэтому я знаю, что делаю. Я был удивлен, узнав, что этот эффект сделан в css.Наведите указатель мыши на фигуру и измените подпись подписи?

Во всяком случае, я застрял в этой части в CS-style3

.no-touch .cs-style-3 figure:hover figcaption, 
.cs-style-3 figure.cs-hover figcaption { 
    opacity: 1; 
    transform: translateY(0px); 
    transition: transform 0.4s, opacity 0.1s; 
}

Что такое .cs-парения? Я ищу это, это какая-то специальная вещь css3? Потому что это не 'класс в файле. И я не могу заставить это работать.

Я пытаюсь навести курсор на фигуру/img, и figcaption предположительно сдвинется вверх.

Я думал, пытающийся фигуры: парить figcaption {}, но это не работает либо

источник

2013-09-05 artSir

Если вы прочитаете код, вы увидите, что они включают <script src="js/toucheffects.js"></script>. Этот сценарий говорит:

// для сенсорных устройств: добавить класс CS-парить к цифрам при прикосновении элементы

источник

2013-09-05 16:06:07 j08691

О, спасибо, я не заметил, что – artSir

На демонстрационной странице есть много примеров. Автор использовал класс .cs-style- "number", чтобы отличить пять разных стилей.

enter image description here

Это означает, что вы должны добавить класс к коду, а также, как и в инспекторе в изображении выше. Я надеюсь, что это вам поможет, в противном случае оставьте комментарий, и мы увидим, можем ли мы помочь вам.

источник

2013-09-05 16:00:09

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

Я предлагаю вам попробовать еще раз и сделать это с помощью css3. Я бы использовал анимацию jquery только как резерв для старого браузера (вы можете обнаружить тех, кто не поддерживает переходы с помощью modernizr.js), потому что анимация css3 намного более эффективна и приятнее видеть –

. Я все еще очень смущен тем, как hover состояния над работой divs, это как теги, a: hover? Как можно div: наведите указатель и вызовите реакцию на изображение? Я сделал переход google search css3, и я копирую и вставляю их, и они не работают для меня, я использую современный браузер Safari. – artSir

Наведите указатель мыши на фигуру и измените подпись подписи?

ответ

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