Сменить свойства одного объекта при наведении на другой
 

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

Есть два объекта, идин из них должен вращаться при наведении указателя на любой из них, но, блин, при наведении на него - он вращается, а на второй - никакой реакции :blink:

<style>
    #id1:hover, #Book:hover ~ #id1 {
        animation: 10s ease-in 0s normal none infinite running gear;
        -webkit-animation: 10s linear 0s normal none infinite running gear;
        animation-timing-function: steps(192, end);
    }        
    
    @keyframes gear {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
</style>

   <div id="gear1">
        <img id="id1" src="svg/gear.svg" width="100%" height="100%">
            <div id="Book">
                <a href="">
                <img width="100%" height=100%" src="svg/book.svg" id="book"></a>
            </div>
    </div>

ЧЯДНТ?

Отвечу сам себе:

Тот div свойства которого нужно менять должен идти в тексте ниже чем тот который его меняет.
Т.е.

Вот так работает

#id1 ~ #match1 {}
~~~
<div id="id1"></div>
<div id="match1"></div>

А вот так нет

#id1 ~ #match1 {}
~~~
<div id="match1"></div>
<div id="id1"></div>