css - 別の要素にカーソルを合わせたときの要素の変換

Question

ページの別の領域にある「a」タグの上にマウスを置いたときに、css トランジション回転変換を適用したい画像があります。これまでのところ、この回転でターゲットにできた唯一の要素は、画像の上にホバーした画像自体です。

section#logo img {
        -webkit-transition: -webkit-transform 5s ease-out;
        -moz-transition: -moz-transform 5s ease-out;
        -o-transition: -o-transform 5s ease-out;        
        transition: transform 5s ease-out;
    }

    section#logo img:hover {
        -ms-transform: rotate(1800deg);
        -webkit-transform: rotate(1800deg);
        transform: rotate(1800deg);
    }

私がやりたいのはこのようなことですが、正しく機能させることができません。

nav a:hover {
    -webkit-transition: -webkit-transform 5s ease-out;
        -moz-transition: -moz-transform 5s ease-out;
        -o-transition: -o-transform 5s ease-out;        
        transition: transform 5s ease-out;
    }

    section#logo img {
        -ms-transform: rotate(1800deg);
        -webkit-transform: rotate(1800deg);
        transform: rotate(1800deg);
    }

マークアップ:

    <nav>
          <a href="/page1.html">Click</a>
    </nav>
    <section id="logo">
          <img src="images/item.png" />
    </section>

どんな助けでも大歓迎です、ありがとう。