html - 通过将鼠标悬停在单独的元素上来触发 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="" />