通過將鼠標懸停在單獨的元素上來觸發CSS動畫

Question

當僅使用CSS3動畫將鏈接懸停在鏈接上時，我試圖在圖像上創建一個小的動畫（圖像會稍微增長）。

我的代碼中的相關片段

HTML：

<img id="enterimg" src="img.png" alt="" />
<a id="enterbutton" href="home.php">Enter</a>

CSS：

#enterimg {
  width: 350px;
  height: 350px;
  -webkit-transition: width 1s ease-out, height 1s ease-out;
  -moz-transition: width 1s ease-out, height 1s ease-out;
  -o-transition: width 1s ease-out, height 1s ease-out;
  transition: width 1s ease-out, height 1s ease-out;
}

a:hover ~ #enterimg{width:400px;height:400px;}

我確信過渡本身是正確的，但是我嘗試過的所有不同“調用”（CSS的最后一行）都沒有起作用。

（這與其他一些問題類似，但是我已經仔細閱讀了它們，據我所知，他們都沒有回答我的問題）

Answer 1

感謝Lokesh Suthar。

兄弟選擇器的順序要求我將鏈接放置在標記中的第一位。 由於選擇是寫的：

a:hover ~ #enterimg{width:400px;height:400px;}

標記必須按此順序

<a id="enterbutton" href="home.php">Enter</a>
<img id="enterimg" src="img.png" alt="" />

Answer 2

如果將內容包裝在觸發器中，然后絕對定位內容，則可以實現類似於使用CSS觸發同級的方式。 至少它將以這種方式外觀和行為。

HTML

<a href="">Click Me
    <img id="enterimg" src="http://www.druglessdrs.com/wp-content/uploads/2012/07/google-logo-small.jpg" alt="" />
</a>

CSS

a img {
    display:block;
    position:absolute;
    top:80px;
    left:0;
    border:solid 1px black;
    -webkit-transition: width 1s ease-out, height 1s ease-out;
    -moz-transition: width 1s ease-out, height 1s ease-out;
    -o-transition: width 1s ease-out, height 1s ease-out;
    transition: width 1s ease-out, height 1s ease-out;
}

a:hover img {
    left:50px;
}

小提琴