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

Как при наведении на один элемент (hover) менять стили другого элемента css?

11.06.2015, 16:42. Просмотров 8986. Ответов 4
Метки нет (Все метки)

Есть вертикальный блок навигации, список, в каждом <li> лежит картинка и заголовок.
Цель: при наведении мышки на элемент списка -> изменять картинку.
Как изменять саму картинку при наведении на нее - я знаю, мне нужно, чтобы наводя на один элемент->изменялся другой.

Пока что нашёл 1 вариант:
one.onmouseover = function(){two.style.transform='rotateY(360deg)'; two.style.transition='transform 1s ease 0s'};
one.onmouseout = function(){two.style.transform='';two.style.transition=''};

Но он как я понял, работает он только ID, т.е. работает только с одним <li>, и создавать кучу id как-то не очень.
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.06.2015, 16:42
Ответы с готовыми решениями:

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

Установить значение css hover для другого элемента
Ребят, подскажите пожалуйста такую вещь... Например есть структура: &lt;div class=&quot;one&quot;&gt; &lt;div...

Как отредактировать стили элемента при динамичексом изменении css
В общем такая проблема. На сайте когда открываю код элемента, он постоянно обновляется и не дает...

CSS - почему :hover при наведении курсора не берет всю область под указанный ему цвет
Добрый день всем! За ранее благодарен тому кто откликнется!!! :hover не берет всю область под...

Как имитировать событие hover элемента А при наведении на элемент Б?
&lt;div class=&quot;plans-list&quot;&gt; &lt;div class=&quot;list-block&quot;&gt; &lt;div class=&quot;block-title&quot;&gt; ...

4
newJS
Эксперт JSЭксперт HTML/CSS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,339
12.06.2015, 06:32 2
Цитата Сообщение от Strikeby Посмотреть сообщение
Но он как я понял, работает он только ID, т.е. работает только с одним <li>, и создавать кучу id как-то не очень.
потому что предназначено для изменения конкретного элемента
без конкретного кода html не понятно что нужно, какой список, какая картинка, как они расположены относительно друг друга?

Strikeby, в редакторе есть куча кнопочек для выделения кода, иначе не читабельно
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
12.06.2015, 09:40 3
Лучший ответ Сообщение было отмечено Strikeby как решение

Решение

Можно и без javascript обойтись.
HTML5
1
2
3
4
5
<ul class='list'>
    <li class='item'><img src='http://images5.fanpop.com/image/photos/27300000/Cute-Kitty-Icons-cats-27346477-100-100.png' alt='' /><a href='#'>hover</li>
    <li class='item'><img src='https://yt3.ggpht.com/-MTSKoo-DJOI/AAAAAAAAAAI/AAAAAAAAAAA/3aNnHw6CWzQ/s100-c-k-no/photo.jpg' alt='' /><a href='#'>hover</li>
    <li class='item'><img src='https://yt3.ggpht.com/-TvvvttTeogQ/AAAAAAAAAAI/AAAAAAAAAAA/5BGRPQszVOs/s100-c-k-no/photo.jpg' alt='' /><a href='#'>hover</li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.list{
    padding:0;
}
.item{
    list-style:none;
    background:#ccc;
    margin-bottom:10px;
    width:200px;
}
.item img{
    border-radius:0;
    margin-right:0; 
    line-height:0;
    vertical-align:middle;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition:all 1s;
}
.item:hover img{
    margin-right:10px;
    border-radius:100%;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
jsfiddle
2
Strikeby
0 / 0 / 0
Регистрация: 11.06.2015
Сообщений: 2
12.06.2015, 11:53  [ТС] 4
Спасибо. А если картинки спрайтами оформлены в классы, получится через css по-вращать их ?)
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
12.06.2015, 14:07 5
Цитата Сообщение от Strikeby Посмотреть сообщение
А если картинки спрайтами оформлены в классы, получится через css по-вращать их ?)
А чего ж не получится) Вот
1
12.06.2015, 14:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.06.2015, 14:07

можно ли менять id элемента при наведении?
Здравствуйте. Такая проблема. Есть большой скрипт, который ссылается на элемент с ИДом. Но мне...

Записать два элемента одного массива, как один элемент другого
Здравствуйте) есть такое задание: нужно составить таблицу истинности(дискретная математика). И в...

Мигает флеш при hover другого элемента
в опере и яндекс браузере при наведении на картинку (клиента) мигает флешка логотипа...


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

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

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