Css 转换悬停在不同元素上的元素

我有一个图像，当我将鼠标移到页面的一个单独区域中的一个“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>

---

非常感谢您的帮助。

我们可以看看您的标记吗？这在很大程度上取决于元素的顺序/关系，是否可以在CSS中完成，或者是否需要使用Javascript。谢谢。我认为唯一的方法是通过javascript向图像中添加/删除css类。我需要在图像中添加和删除什么样的类？