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的sibbling。至少它会以这样的方式行事。

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;
}

Fiddle

通过将鼠标悬停在单独的元素上来触发CSS动画

2 个答案: