При наведении меняется картинка css: Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Разное 

html — Изменить и фон, и картинку при наведении мыши на элемент

Задать вопрос

Вопрос задан

Изменён 5 лет 3 месяца назад

Просмотрен 4k раза

Как при наведении на картинку, у которой круглый background c цветом, сделать изменение цвета и фона, и самой картинки (иконки) одновременно?

.menu li{
    list-style: none;
    margin-right: 15px;
    border-radius: 50%;
    width: 53px;
    height: 53px;
    background-color: #030303;
    opacity: 0.4;
}

.menu_link img{
    padding: 14px 14px 14px 14px;
}

.menu li:hover {
    background-color: #2ecc71;
    color: red;
    opacity: 1;
}
 
<nav>
    <ul>
        <li>
            <a href="#"><img src="img/apple. png" alt=""></a>
        </li>
    </ul>
 </nav>

Должно быть вот так:

  • html
  • css
  • hover
  • background
  • img

0

Если это <img src="img/apple.png" alt=""> работает как задний фон то лучше использовать backgroung-image и растянуть пустую ссылку <a> на всю строчку <li>

2

Попробуйте заменять картинку на другую, то есть картинке невозможно задать цвет через свойство color, дайте кнопке background-image() и при наведении на нее просто меняйте на другую картинку. Также рекомендую поработать с SVG. Есть еще библиотекa Font Awesome(иконки в шрифтах).

2

Вот вам пример с Font-Awesome

body{
  background:url(https://st. depositphotos.com/1986597/2352/i/950/depositphotos_23525721-stock-photo-beige-brick-background.jpg) no-repeat center/cover;
}
.circle{
  display:inline-block;
  width:35px;
  height:35px;
  line-height:35px;
  text-align:center;
  background-color:#444;
  border-radius:50%;
  color:#fff;
  opacity:.55;
}
.circle:hover{
  transition:all .3s ease;
  background-color:#2ecc71;
  opacity:1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#"><i></i></a>
<a href="#"><i></i></a>
<a href="#"><i></i></a>

3

Сделать задуманое можно при помощи спрайтов картинок (иконок) + свойствами CSS: background: url('img/icons-sprite.png') no-repeat 0 0; & background-position: 0px 0px;

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

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

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

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

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

Почта

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

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

Почта

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

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

Как менять картинку при наведении курсора мыши — Вопрос от Gicu Harea

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16637)
  • Платные услуги (2159)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1442)
  • Редактор страниц (237)
  • Новости сайта (501)
  • Каталоги (809)
  • Блог (дневник) (114)
  • Объявления (296)
  • Фотоальбомы (434)
  • Видео (257)
  • Тесты (60)
  • Форум (581)

Продвижение сайта

  • Монетизация сайта (222)
  • Раскрутка сайта (2462)

Управление сайтом

  • Работа с аккаунтом (5354)
  • Поиск по сайту (427)
  • Меню сайта (1767)
  • Домен для сайта (1544)
  • Дизайн сайта (13507)
  • Безопасность сайта (1489)
  • Доп. функции (1309)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (320)
  • Статистика сайта (198)
  • Соц. постинг (213)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (433)
  • Софт для вебмастера (39)
  • Вопросы
  • Дизайн сайта
  • Как менять картинку при…

голоса: +2

 

Лучший ответ

Прочитайте http://htmlbook. ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee или уточните вопрос

Вот примеры смены картинок при наведении с различными эффектами http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html

| Автор: webanet
Выбор ответа лучшим | | Автор: Yuri_Geruk

…

Как изменить цвет фона при наведении курсора на элементы li с помощью CSS?

В этой статье мы увидим, как изменить цвет фона li (элемент списка) при наведении с помощью CSS.

Эффект hover может использоваться для обозначения интерактивности или просто для эстетических целей, например, для выделения различных элементов в случае списка. Событие Hover может быть оформлено с использованием псевдокласса :hover и обычно активируется, когда курсор пользователя находится над элементом.

Синтаксис: Чтобы стилизовать элемент li при наведении:

 li:hover{
    имя-свойства: значение;
}

Подход: Поскольку мы хотим изменить цвет фона элементов li при наведении на них курсора, мы добавим свойство background-color с цветом, на который мы хотим изменить цвет при наведении, в li: наведите селектор . Это показано в приведенном ниже примере, где цвет фона изменится на голубой при наведении.

Пример 1: В приведенном ниже коде мы создали неупорядоченный список с двумя элементами списка. Цвет элементов списка меняется при наведении на них курсора.

HTML

< html >

   

< головка >

     < 9 0037 title >Стили наведения курсора на li заголовок >

     < стиль >

         li:hover{

             background-color:cyan;

         }

     стиль >

головка >

   

< корпус >

     < h3 стиль 90 037 = "color:green" >GeeksforGeeks h3 >

     < p >Посмотрим эффект наведения на элемент li p >

     < ул >

         < li >Элемент 1 li >

         < li >Элемент 2 li >

ul >

корпус >

  90 038  

HTML >

Объяснение: Мы использовали селектор li: hover для стилизации элементов списка при наведении. В этом селекторе мы указали свойство, например, background-color : cyan при наведении курсора на элемент списка. Кроме того, класс можно использовать для стилизации определенных элементов списка с различными свойствами при наведении курсора (как показано во втором примере кода).

Выход:

код 1 выход

Пример 2: В этом примере мы создали класс, который содержит различные свойства CSS, и используем его для стилизации списка с пользовательскими параметрами.

HTML

< html >

   

< головка >

     < 9 0037 название >Наведите стиль на li title >

     < style > 9 0003

         . special:hover{

             курсор: указатель;

             background-color: burlywood;

         }

     стиль >

головка >

   

< 9003 8 корпус >

     < h3 стиль = "цвет :green" >GeeksforGeeks h3 >

     < p >Let увидеть эффект наведения на некоторые элементы li р >

     < ул >

   < li >Пункт 2 li >

         < li 90 037 класс = "специальный" >Специальный товар li >

         < li >Товар 3 li >

         < li класс = "особый" >Специальный пункт 2 li >

     9003 7 ул >

корпус >

html >

Объяснение: Здесь цвет элементов списка с «особым» классом меняется при наведении на них курсора, и курсор изменится на указатель. Мы можем изменить background-color li при наведении. Точно так же другие свойства также могут быть указаны в селекторе CSS :hover и могут использоваться для других тегов, в зависимости от требований.

Выход:

код 2 выход


Последнее обновление: 20 июн, 2022

Нравится статья

Сохранить статью

Как анимировать ссылки при наведении (копировать + вставить CSS) — Big Cat Creative

Squarespace TipsСоветы по дизайну

Автор Erica Hartwick

Этот пост может содержать партнерские ссылки. Мы можем получать комиссию за покупки, совершенные по этим ссылкам (конечно, бесплатно для вас! 🙂)

Быстрый и простой способ поднять ваш сайт на новый уровень — изменить состояние гиперссылок при наведении курсора (гиперссылки — это просто причудливое название для ссылок на вашем веб-сайте). Мы можем внести ряд изменений, но мы познакомим вас с некоторыми из самых простых и эффективных:

  • Выделение ссылок курсивом при наведении курсора анимация подчеркивания ссылок при наведении

Приступим!


Идентификация вашего типа шрифта в Squarespace 7.0 и 7.1

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

В Squarespace 7.0 существует четыре различных варианта стиля заголовка/абзаца:

  • Заголовок один h2

  • 9000 2 Заголовок два h3

  • Заголовок три h4

  • Пункт p

В Squarespace 7.1 , есть на самом деле 4 заголовка и 3 размера абзаца.

  • Заголовок один h2

  • Заголовок два h3

    • 905 56

    Заголовок три h4

  • Заголовок четыре h5

  • Все абзацы (параграф 1, 2 и 3) p

  • Параграф 1 / Большой абзац p.sqsrte-large 9003 8

  • Абзац 3 / Малый параграф p.sqsrte -small

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

Измените ссылку на 

Курсив  при наведении курсора

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

Сначала скопируйте приведенный ниже код и вставьте его в настраиваемую панель CSS Squarespace ( Design > Custom CSS ).

Затем замените текст FONTSTYLE кодом заголовка/абзаца, на который вы ориентируетесь, как указано выше.

 СТИЛЬ ШРИФТА a: hover {
    стиль шрифта: курсив;
}

Например, если я использую Squarespace 7.1 и хочу настроить таргетинг на ссылки h2, мой пользовательский фрагмент CSS будет выглядеть так:

 h2 а: наведите {
    стиль шрифта: курсив;
}

Видите, что я имел в виду? Всего два шага, и вы получите супер крутой текстовый эффект !

Теперь давайте посмотрим, как мы можем изменить цвет наших текстовых ссылок при наведении.

Изменить ссылку 

цвет  при наведении курсора

Еще один быстрый способ создать движение на веб-сайте — изменить цвет гиперссылок при наведении. Здесь вы сделаете то же самое — скопируйте и вставьте приведенный ниже код на свой веб-сайт Squarespace, перейдя на Дизайн > Пользовательский CSS .

 СТИЛЬ ШРИФТА a: hover {
    цвет: #FFDA00 !важно;
}

Во-первых, замените текст FONTSTYLE кодом заголовка/абзаца, на который вы ориентируетесь (все коды перечислены ранее в посте). Это говорит веб-сайту применить изменение цвета только к ссылкам в этом текстовом стиле.

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

 СТИЛЬ ШРИФТА a:hover {
    стиль шрифта: курсив;
    цвет: #FFDA00 !важно;
}

Не забудьте заменить FONTSTYLE на правильный тег, чтобы убедиться, что он применим к вашему сайту!

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

Добавьте

подчеркивание  к вашей ссылке при наведении

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

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

Для этой функции нам понадобится другой код в зависимости от используемой версии Squarespace. Во-первых, давайте рассмотрим, как это сделать в Squarespace 7.1!


Squarespace 7.1

Во-первых, нам нужно удалить подчеркивание текста по умолчанию, а затем снова добавить подчеркивание при наведении курсора на ссылку. Скопируйте и вставьте приведенный ниже код в настраиваемую панель CSS Squarespace ( Design > Custom CSS) .

Затем вы собираетесь заменить FONTSTYLE с текстовым тегом, на который вы хотите настроить таргетинг. Все коды указаны ранее в посте!

 НАБОР ШРИФТА a {
украшение текста: нет !важно;
}
СТИЛЬ ШРИФТА a: hover {
  оформление текста: подчеркивание !важно;
  толщина оформления текста: 1px !важно;
  text-decoration-color: #FFDA00 !важно;
}

Вы также можете изменить этот код, чтобы сделать его своим:

 text-decoration-thickness: 1px !important; 
 text-decoration-color: #FFDA00 !важно;


Squarespace 7.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *