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>

非常感谢任何帮助，谢谢。