Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
GTRka
1 / -2 / 0
Регистрация: 28.11.2016
Сообщений: 65
1

Как при наведении на текст менять картинку вместе с текстом

14.08.2017, 19:17. Просмотров 1400. Ответов 5
Метки нет (Все метки)

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

HTML5
1
<li><a class="face" href="" style="text-decoration: none"><img onmouseover="this.src='img/social_icon/fb1.svg'" onmouseout="this.src='img/social_icon/fb.svg';" alt="faceb" src="img/social_icon/fb.svg"><span class="soc">Facebook</span></a></li>
CSS
1
2
.face:hover
    color: #fff
Как бы вот записать в css вот эти строчки:
HTML5
1
<img onmouseover="this.src='img/social_icon/fb1.svg'" onmouseout="this.src='img/social_icon/fb.svg';" alt="faceb" src="img/social_icon/fb.svg">
Вариант через background-image не подходит!

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.08.2017, 19:17
Ответы с готовыми решениями:

Раскрывающийся текст при наведении на картинку
Как сделать раскрывающийся текст при наведении или клике на на картинку? У меня есть первая...

Выезжающий текст к при наведении на картинку
Есть картинка, она расположена статично на странице( не исключительно слева как в примерах), ну то...

Изменить картинку и текст при наведении
Есть картинка и текст под ней. Нужно чтобы при наведении на любой из этих элементов, оба...

При наведении на картинку появляется текст в центре
При наведении курсора на картинку текст не вертикально по центру картинки и важно убрать высоту...

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

5
Kven-M
32 / 32 / 24
Регистрация: 16.04.2015
Сообщений: 219
14.08.2017, 22:01 2
Попробуй в css прописать следующим образом стили, может получится
CSS
1
2
3
4
5
6
7
li a:hover {
  color: #fff;
}
 
li a:hover img {
    display:block;
}
0
GTRka
1 / -2 / 0
Регистрация: 28.11.2016
Сообщений: 65
15.08.2017, 08:13  [ТС] 3
Kven-M, неа, этот вариант не работает, как я только уже не пробовал, никак(((
0
Изображения
  
SergioSup
81 / 80 / 41
Регистрация: 20.01.2017
Сообщений: 219
15.08.2017, 10:56 4
Лучший ответ Сообщение было отмечено GTRka как решение

Решение

как вариант
HTML5
1
2
3
4
5
6
7
8
9
<li>
    <a class="face" href="" style="text-decoration: none">
        <div class="icon">
            <img alt="faceb" src="img/social_icon/fb.svg">
            <img alt="faceb" src="img/social_icon/fb1.svg">
        </div>
        <span class="soc">Facebook</span>
    </a>
</li>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.icon img,.soc{
    transition: .3s;
}
.icon {
    position: relative;
    width: 20px;
    height: 20px;
}
.icon img {
    position: absolute;
    top: 0;
    left: 0;
}
.icon img:last-child {
    opacity: 0;
}
.face:hover {
    color: red;
}
.face:hover img:last-child {
    opacity: 1;
}
1
GTRka
1 / -2 / 0
Регистрация: 28.11.2016
Сообщений: 65
15.08.2017, 12:46  [ТС] 5
SergioSup, хммм... спасибо!))все работает)
Интересный вариант, буду знать теперь что так можно)))
0
SergioSup
81 / 80 / 41
Регистрация: 20.01.2017
Сообщений: 219
15.08.2017, 20:20 6
вариант №2 (без transition)
HTML5
1
2
3
4
5
6
<li>
    <a class="face" href="" style="text-decoration: none" onmouseover="document.getElementById('image').src='img/social_icon/fb1.svg'" onmouseout="document.getElementById('image').src='img/social_icon/fb.svg'">
        <img id='image' alt="faceb" src="img/social_icon/fb.svg">
        <span class="soc">Facebook</span>
    </a>
</li>
CSS
1
2
.face:hover
    color: #fff
0
15.08.2017, 20:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.08.2017, 20:20

Как при наведении на li менять фон у блока слева
Добрый вечер, подскажите как можно сделать так чтобы при наведении на пункт li менялся фон у блока...

Как при наведении на дочерний блок менять стиль родительского блока
Здравствуйте, подскажите пожалуйста как при наведении на дочерний блок менять стиль родительского...

Как при наведении на один элемент, менять стили другого элемента css?
Здравствуйте! Возник вопрос... Как при наведении на один елемент, изменять стили остальных...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru