Как навести курсор на один элемент и применить анимационные эффекты к другому

0

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

По сути, это то, что я хочу: http://jsfiddle.net/jMEL7/2/ За исключением того, что он должен переходить, когда я нависаю над любой из двух кнопок, а не когда я нависаю над изображением.

Iv'e пытался использовать селекторы, но это не работает. Хотел бы я просто сделать это:

    #lb:hover {
    h {
        webkit-transform:rotate(270deg);
        transform:rotate(270deg)
    }
}

С других сообщений кажется, что JS - единственный способ. Я не знаю jQuery, поэтому я потерян.

Теги:

3 ответа

1
Лучший ответ

Вы можете использовать соседний комбинатор (+), но только если #h после #lb в HTML.

#lb:hover + #b {
    // your style
}

Если между #h и #lb есть другие элементы, вы можете использовать комбинацию (~).

#lb:hover ~ #h {
    // your style
}

например -

#lb:hover ~ #h {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}

DEMO

Для ребенка и братьев и сестер селекторного чтения

в заключение

#main > a:nth-child(1):hover ~ a:nth-child(3) img {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}
#main > a:nth-child(2):hover ~ a:nth-child(3) img {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}

DEMO

Поделиться
  • 0
    Вы, очевидно, изменили HTML-код OP, это может быть не то, что хочет OP. У нас не может быть чистого решения CSS без изменения HTML-кода OP.
  • 0
    Да, я знаю, но ОП дал ссылку на то, что он, по сути, хотел, я сделал в этом правку
Показать ещё 4 комментария
1

Я поместил ваш тег ввода перед тегом img, чтобы я мог использовать соседний комбинатор (+)

<input type="button" id="lb" value="Button">
<img src="http://playrust.com/wp-content/uploads/2013/12/rust-icon-512.png" id="h" height="130px"/>

Код CSS:

#lb:hover + #h {
-webkit-transform:rotate(270deg);transform:rotate(270deg);
}

JS FIDDLE

Поделиться
0

HTML

<input type="button" id="lb" value="Button">
<img src="http://playrust.com/wp-content/uploads/2013/12/rust-icon-512.png" 
     id="h" height="130px"/>

CSS

#lb {
    float:right;
    color:#6C2D58;
    font-size:40px;
    font-family:Impact;
    transition: 1s;
}
#lb:hover {
    background-color:#D88E79;
}
#h {
    transition:1s;
}
#lb:hover ~ #h {
-webkit-transform:rotate(270deg);transform:rotate(270deg);
}

Демоны для скриптов

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню