【问题标题】：Resize a pic on "ul hover"在“ul hover”上调整图片大小
【发布时间】：2015-09-16 01:45:13
【问题描述】：

我最近在 CSS 上遇到了一个小问题。我有一个列表，我已经设计了一些样式，现在想要悬停效果。因此，当您将鼠标悬停在列表项上时，其中的图像会调整大小，而其余部分（文本 - 跨度）保持不变。

<ul id="Somename">
    <li>
    <a id="ID1" href="LINK">
        <img alt="Something 1" src="LINK">
        <span>Text</span>
    </a>
</li>
<li>
    <a id="ID2" href="LINK">
        <img alt="Something 2" src="LINK">
        <span>Text</span>
    </a>
</li>
<li>
    <a id="ID3" href="LINK">
        <img alt="Something 3" src="LINK">
        <span>Text</span>
    </a>
</li>

我尝试像 here 那样制作动画，但没能做到。

我试过的方法是

#Somename a:hover > img {width: XXpx; }

【问题讨论】：

标签： css animation hover html-lists

【解决方案1】：

这里有一个快速示例，可以帮助您开始设置 html 样式。这将放大图像并像示例中一样旋转它：

JS Fiddle

/* Give the parent li item a relative position. Hide overflowed content since image will overflow*/
li {
    width: 300px;
    height: 300px;
    margin: 10px;
    overflow: hidden;
    background: black;
    color: white;
    position: relative;
}
li span {
    color: white;
    position: absolute;
    z-index: 999;
}
/* Set an initial size and rotate to be transitioned */
#Somename a > img {
    width: 200px;
    transition: .4s;
    position: absolute;
    transform: rotate(0deg);
}
/* Add hover styles to scale and rotate */
#Somename li:hover a > img {
    width: 300px;
    transform: rotate(90deg);
}

【讨论】：

【解决方案2】：

在过渡期间利用 CSS3 的伪方法来定位其他 DOM 元素。

这些方面的东西应该适合你：

HTML：

<ul>
    <li><a href="#">This Link Grows IMG</a>
        <img src="http://www.google.com/homepage/images/google_favicon_64.png" />
        <p>Filler Text</p>
    </li>
    <li><a href="#">This Link Grows IMG</a>
        <img src="http://www.google.com/homepage/images/google_favicon_64.png" />
        <p>Filler Text</p>
    </li>
</ul>

CSS：

li > img {
transform: scale(.5);
transition: transform .25s ease;
}

li:hover > img {
transform: scale(1);
transition: transform .25s ease;

}

在这里查看：http://jsfiddle.net/2bpayv3q/1/

【讨论】：