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

Strikeby

Есть вертикальный блок навигации, список, в каждом
  • лежит картинка и заголовок. Цель: при наведении мышки на элемент списка -> изменять картинку. Как изменять саму картинку при наведении на нее - я знаю, мне нужно, чтобы наводя на один элемент->изменялся другой.Пока что нашёл 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, т.е. работает только с одним
  • , и создавать кучу id как-то не очень.
  • 4 ответа

    Strikeby

    Но он как я понял, работает он только ID, т.е. работает только с одним
  • , и создавать кучу id как-то не очень.
  • потому что предназначено для изменения конкретного элемента без конкретного кода html не понятно что нужно, какой список, какая картинка, как они расположены относительно друг друга?Strikeby, в редакторе есть куча кнопочек для выделения кода, иначе не читабельно


    Strikeby

    Можно и без javascript обойтись.
    <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>
    .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


    Strikeby

    Спасибо. А если картинки спрайтами оформлены в классы, получится через css по-вращать их ?)


    Strikeby

    А если картинки спрайтами оформлены в классы, получится через css по-вращать их ?)
    А чего ж не получится) Вот