我最近遇到了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; }
答案 0 :(得分:1)
这是一个快速示例,可以帮助您入门。这将缩放图像并旋转它,如下例所示:
/* 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);
}
答案 1 :(得分:0)
利用CSS3的伪方法在转换过程中定位其他DOM元素。
这些方面的内容对您有用:
<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;
}