CSS悬停图像位置更改

编程入门 行业动态 更新时间:2024-10-28 00:20:20
本文介绍了CSS悬停图像位置更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我确定这是一件超级愚蠢的事情,但我一直被困在一段时间,现在......所以,我在网站上有图片,我希望它们在悬停时略微移动。

所以我在HTML中:

< a href =someaddress >< img class =thumbsrc =somefile/>< / a>

而在CSS中:

img.thumb { position:relative; top:0px; 背景:#333399; } img.thumb:hover { position:relative; top:5px; 背景:#00CCCC; $ / code $ / pre

背景只是为了看看是否有事情发生。实际上,背景没有改变,所以悬停从未被考虑。有没有人有一个想法,为什么这可能是?

编辑

谢谢很多,每个人!

我实际上通过抛出一个来解决它:

a> img.thumb:hover { position:relative; top:2px; }

其中有效。仍然不完全确定它为什么不工作只是与img.thumb:hover ...

解决方案

你的代码应该工作,我在这里检查过它: cssdesk/XcV2D

其他一些风格应该会影响......

I'm certain it's something super stupid, but I've been stuck for a while, now... So, I have images on a website, and I'd like them to move slightly on hover.

So I have in the HTML:

<a href="someaddress"><img class="thumb" src="somefile"/></a>

And in the CSS:

img.thumb { position:relative; top:0px; background:#333399; } img.thumb:hover { position:relative; top:5px; background:#00CCCC; }

The backgrounds are there just to see whether something is happening. Actually, the background doesn't change, so the hover is never taken into account. Does anyone have an idea why that could be??

EDIT

Thanks a lot, everyone!

I actually solved it by throwing in a:

a > img.thumb:hover { position:relative; top:2px; }

Which worked. Still not exactly sure why it didn't work just with img.thumb:hover...

解决方案

Your code should work, I have checked it here: cssdesk/XcV2D

Some other styles should be impacting...

更多推荐

CSS悬停图像位置更改

本文发布于:2023-07-20 05:10:37,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:图像   位置   CSS

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!