Эффект css hover: CSS: Hover — эффекты при наведении

css — SVG hover эффект

Вопрос задан 2 года 4 месяца назад

Изменён 2 года 4 месяца назад

Просмотрен 471 раз

Я подключаю на страницу иконки с помощью код svg + path при наведении они должны менять цвет. Делаю так CSS

.icon:hover {
 fill: #000;
}

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

• css
• svg
• hover
• color

1

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

Сделайте закраску fill всего SVG
Ниже полный код:

svg  {
fill:black;
}
svg:hover {
fill:red;
}

<svg  xmlns="http://www. w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24">
    
        <path  d="M12.892 13.745s.427.038.656-.247l.448-.563c.216-.28.738-.458 1.249-.174.676.382 1.55.982 2.149 1.541.33.278.407.688.182 1.121l-.002.009c-.232.408-.541.791-.932 1.148l-.009.006c-.44.367-.946.58-1.487.404l-.01-.014c-.972-.275-3.304-1.464-4.79-2.649-2.431-1.918-4.159-5.082-4.637-6.778l-.015-.01c-.176-.543.039-1.049.404-1.488l.007-.008c.357-.391.739-.701 1.148-.932l.009-.002c.432-.225.842-.149 1.121.182.367.379 1.056 1.291 1.54 2.149.284.51.106 1.033-.173 1.248l-.564.448c-.284.23-.247.657-.247.657s.834 3.156 3.953 3.952zm4.907-2.616c-.167 0-.303-.135-.304-.302-.014-1.83-.564-3.288-1.634-4.332-1.072-1.045-2.427-1.581-4.027-1.592-.168-.001-.303-.138-.301-.306.001-.167.136-.301.303-.301h.002c1.762.012 3.258.606 4.447 1.764 1.19 1.162 1.802 2.765 1.817 4.763.001.167-.133.304-.301.306h-.002zm-1.595-.624h-.007c-.168-.004-.301-.143-.297-.31.024-1.038-.273-1.878-.906-2.569-.63-.689-1.

  
 495-1.065-2.645-1.149-.167-.013-.293-.158-.281-.325.013-.167.158-.293.325-.281 1.294.095 2.32.548 3.049 1.345.733.8 1.092 1.807 1.065 2.992-.004.165-.139.297-.303.297zm-1.558-.522c-.161 0-.295-.126-.303-.289-.051-1.03-.537-1.534-1.527-1.588-.168-.009-.296-.152-.287-.319.009-.168.151-.296.319-.287 1.308.07 2.034.819 2.101 2.164.009.167-.12.31-.288.318l-.015.001zm6.817 3.469c-.605 4.877-4.172 5.185-4.83 5.396-.28.09-2.882.737-6.152.524 0 0-2.438 2.94-3.199 3.705-.119.119-.258.167-.352.145-.131-.032-.167-.188-.165-.414l.02-4.016v-.001c-4.762-1.323-4.485-6.295-4.431-8.898.054-2.603.543-4.736 1.996-6.17 2.61-2.364 7.987-2.011 7.987-2.011 4.541.02 6.717 1.387 7.222 1.845 1.675 1.434 2.528 4.867 1.904 9.895zm-.652-11.113c-.597-.548-3.007-2.298-8.375-2.322 0 0-6.33-.382-9.416 2.45-1.718 1.718-2.322 4.231-2.386 7.348-.063 3.118-.146 8.958 5.484 10.542l.006.002-.004 2.416s-.035.979.609 1.179c.779.241 1.236-.502 1.981-1.304.408-.44.971-1.086 1.397-1.58 3.851.322 6.812-.417 7.149-.526.777-.253 5.177-.   816 5.893-6.657.738-6.022-.358-9.83-2.338-11.548z"/>
            
   
</svg>

Вариант, когда на каждой странице иконка может иметь разные цвета

Для этого используется <symbol> и команда клонирования <use> с индивидуальной закраской fill="red"

<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24">
    <symbol>
        <path d="M12.892 13.745s.427.038.656-.247l.448-.563c.216-.28.738-.458 1.249-.174.676.382 1.55.982 2.149 1.541.33.278.407.688.182 1.121l-.002.009c-.232.408-.541.791-.932 1.148l-.009.006c-.44.367-.946.58-1.487.404l-.01-.014c-.972-.275-3.304-1.464-4.79-2.649-2.431-1.918-4.159-5.082-4.637-6.778l-.015-.01c-.176-.543.039-1.049.404-1.488l.007-.008c.357-.391.739-.701 1.148-.932l.009-.002c.432-.225.842-.149 1.121.182.367.379 1.056 1.291 1.54 2.149.284.51.106 1.033-.173 1.248l-.564.448c-.284.23-.247.
 
 657-.247.657s.834 3.156 3.953 3.952zm4.907-2.616c-.167 0-.303-.135-.304-.302-.014-1.83-.564-3.288-1.634-4.332-1.072-1.045-2.427-1.581-4.027-1.592-.168-.001-.303-.138-.301-.306.001-.167.136-.301.303-.301h.002c1.762.012 3.258.606 4.447 1.764 1.19 1.162 1.802 2.765 1.817 4.763.001.167-.133.304-.301.306h-.002zm-1.595-.624h-.007c-.168-.004-.301-.143-.297-.31.024-1.038-.273-1.878-.906-2.569-.63-.689-1.495-1.065-2.645-1.149-.167-.013-.293-.158-.281-.325.013-.167.158-.293.325-.281 1.294.095 2.32.548 3.049 1.345.733.8 1.092 1.807 1.065 2.992-.004.165-.139.297-.303.297zm-1.558-.522c-.161 0-.295-.126-.303-.289-.051-1.03-.537-1.534-1.527-1.588-.168-.009-.296-.152-.287-.319.009-.168.151-.296.319-.287 1.308.07 2.034.819 2.101 2.164.009.167-.12.31-.288.318l-.015.001zm6.817 3.469c-.605 4.877-4.172 5.185-4.83 5.396-.28.09-2.882.737-6.152.524 0 0-2.438 2.94-3.199 3.705-.119.119-.258.167-.352.145-.131-.032-.167-.188-.165-.414l.02-4.016v-.001c-4.762-1.323-4.485-6.295-4.431-8.898.054-2.603.543-4.736 1.996-6.

  
  17 2.61-2.364 7.987-2.011 7.987-2.011 4.541.02 6.717 1.387 7.222 1.845 1.675 1.434 2.528 4.867 1.904 9.895zm-.652-11.113c-.597-.548-3.007-2.298-8.375-2.322 0 0-6.33-.382-9.416 2.45-1.718 1.718-2.322 4.231-2.386 7.348-.063 3.118-.146 8.958 5.484 10.542l.006.002-.004 2.416s-.035.979.609 1.179c.779.241 1.236-.502 1.981-1.304.408-.44.971-1.086 1.397-1.58 3.851.322 6.812-.417 7.149-.526.777-.253 5.177-.816 5.893-6.657.738-6.022-.358-9.83-2.338-11.548z"/>
            
    </symbol>
</svg>

<div>
  <a href="">
    <svg viewBox="0 0 24 24">
        <use xlink:href="#viber" fill="red"></use>
     </svg> 
  </a>  
    <a href="">
    <svg viewBox="0 0 24 24">
        <use xlink:href="#viber" fill="green"></use>
     </svg>
  </a>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Применение CSS Hover Effects для улучшения взаимодействия с пользователем — Go WordPress

В этой статье

• Эффекты наведения выделяют важные элементы сайта
• Направляйте посетителей и рекламируйте CTA
• Начните работу с эффектами наведения CSS

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

Добавление эффектов наведения CSS — это один из способов выделить важные элементы сайта и упростить взаимодействие с пользователем. Благодаря множеству доступных готовых эффектов при наведении курсора, добавление одного из них на ваш сайт может быть простым процессом.

Во-первых, разберитесь, что такое CSS-эффекты наведения и когда их можно использовать.

Эффекты при наведении курсора выделяют важные элементы сайта

В двух словах, каскадные таблицы стилей (CSS) — это фрагменты кода, которые сообщают веб-браузерам, как отображать содержимое веб-страницы. Эффекты наведения анимируют определенные элементы сайта, такие как ссылки или кнопки, всякий раз, когда посетитель наводит на них курсор. Чтобы создать эффект наведения, примените код CSS к элементу, который хотите выделить.

Распространенный случай использования эффекта наведения — когда вы наводите указатель мыши на строку текста, и ее фон меняет цвет. Эффекты наведения можно использовать для выделения определенного действия, например, кнопки «Не пропустить» на главной странице eBay, или для выделения метки меню, которую вы можете увидеть в действии на веб-сайте Village Voice . Как и на главной странице Angry Birds, многие сайты сочетают эффекты заголовка и наведения на кнопку, чтобы повысить вовлеченность посетителей.

Направляйте своих посетителей и продвигайте свои CTA

Эффекты наведения более эффективны, если их применять умеренно к элементам, на которые вы хотите, чтобы посетители нажимали.

Одним из наиболее распространенных способов использования этого эффекта является его сочетание с призывом к действию (CTA). Согласно блогу CreativeMMS , призывы к действию — это директивные заявления, которые облегчают путь вашего потенциального клиента или клиента, сообщая им, что делать дальше.

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

Начало работы с эффектами наведения CSS

Если у вас есть тарифный план WordPress.com Премиум или Бизнес, вы можете добавить пользовательский CSS на свой веб-сайт. Вот как добавить эффект наведения.

1. Найдите эффект наведения, который вы хотите использовать

CodePen — это онлайн-репозиторий бесплатных стилей и анимаций CSS, который вы можете просмотреть, чтобы найти понравившийся эффект наведения. Кроме того, вы также можете выполнить поиск в Google, чтобы найти другие ресурсы CSS. Но если вы собираетесь использовать эффекты CSS из Интернета, ищите те, которые используют только HTML и CSS. Избегайте JavaScript, так как он добавляет дополнительный уровень сложности (и не разрешен на WordPress.com, если у вас нет тарифного плана с включенными плагинами).

2.

Добавьте HTML-код к вашему контенту

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

Добавьте HTML-код в соответствующее место и сохраните страницу.

3. Добавьте CSS в свой настройщик

Следующим шагом будет добавление CSS, который применит эффект наведения после запуска. Чтобы получить доступ к функции Custom CSS, щелкните пункт меню Customize , чтобы открыть окно Настройщик , затем выберите CSS .

Затем скопируйте CSS из выбранного вами примера эффекта наведения и вставьте его в редактор CSS. Нажмите кнопку Publish , чтобы сохранить изменения, и ваш эффект наведения CSS будет активен для элемента HTML, который вы добавили ранее.

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

Нравится:

Нравится Загрузка…

ОБ АВТОРЕ

Позвольте нашим специалистам создать ваш собственный веб-сайт WordPress.com.

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

Подать заявку

Триггеры при наведении — Интерактивные эффекты CSS

Запуск одного или нескольких эффектов при наведении курсора на элемент

Обзор

Триггер Hover , как следует из названия, запускает эффект перехода (анимация), когда пользователь выполняет действие :hover на одном или нескольких элементах. Чтобы добавить эффект к одному элементу, используйте триггеры. Если вам нужно анимировать сразу несколько эффектов, когда пользователь наводит курсор на один (родительский) элемент, используйте родительские триггеры. Вы даже можете комбинировать эти два триггера.

Синтаксис

Синтаксис триггера следующий : где:

• hover: — активировать эффект на элементе дочерние элементы при получении родительского элемента :hover

Наведите курсор на элементы:

Цвет фона

Непрозрачность

Поднять

 
Цвет фона
Непрозрачность
Push up
 

На родительском элементе

Триггер множественных эффектов на дочерних элементах, когда родительский элемент получает состояние :hover используя data-tor="hover(p|):" .

Все элементы должны быть дочерними по отношению к родительскому элементу.

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

data-tor-parent

Добавьте data-tor-parent="hover" к родительскому элементу-оболочке, затем используйте hover(p): , чтобы вызвать множественный эффект, когда родительский элемент зависает.

Наведите указатель мыши на обертку:

Масштаб

Непрозрачность

Поднимите вверх

 

  

  
Масштаб
  
Непрозрачность
  
Отжимание
 

Пользовательский родительский селектор

Также можно запускать несколько эффектов без элемента data-tor-parent . Просто используйте hover(): и выберите нужный элемент.

В этом примере показано, как создать несколько эффектов при наведении родительского селектора #wrapper .

Наведите указатель мыши на обертку:

Масштаб

Непрозрачность

Приподнимите

 

  
Масштаб
  
 Непрозрачность
  
 up(xs)">Отжимание
 

Множественные эффекты

Вы можете комбинировать несколько триггеров между или даже с родительскими триггерами в одном атрибуте data-tor .

На одном элементе

Использовать несколько наведения: в одном атрибуте data-tor .

Наведите указатель мыши на элементы:

Толчок и тень

Уменьшение и затемнение

Поворот и непрозрачность

 
Push & shadow 
Уменьшить и затемнить
Поворот и непрозрачность
 

На родительском элементе

Использовать несколько hover(p): в одном атрибуте data-tor .

Наведите указатель мыши на оболочку:

Толчок и тень

Уменьшение и затемнение

Поворот и прозрачность

 

  
 up(xs) hover(p):shadow(risen)">Push & shadow
  
Уменьшить и затемнить
  
Поворот и непрозрачность
 

Комбинация эффектов

Вы даже можете комбинировать hover: с hover(p): . Но поскольку hover(p): имеет более высокий приоритет, он может переопределить триггер hover: для некоторых эффектов. Поставьте восклицательный знак ! перед сокращением триггера вроде этого !hover: . Это добавит атрибут !important к триггеру и переопределит родительский триггер. Это полезно, когда у вас есть несколько похожих элементов, и вам нужно анимировать их при наведении родительского триггера, но вам также нужно запускать анимацию (переход) для отдельных элементов :hover состояние без их вложения.

наведение: триггер не работает

Наведение на обёртку и отдельные элементы:

Нажатие вверх

Масштаб

Непрозрачность

С важным

! отметка

Наведите указатель мыши на обертку и отдельные элементы:

Поднимите вверх

Масштаб

Непрозрачность

No related posts.