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

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>

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