代码之家 › 专栏 › 技术社区 › nLL

css悬停在图像上

hover focus css

nLL · 技术社区 · 14 年前

td中的图像

<td style="text-align:right;"><a class="ratingstar" href="javascript:rate('1','27')" title="1"><img src="assets/images/star.png" alt="*" /></a></td>

此图像的Css

.ratingstar:hover img, .ratingstar:focus img
{
   margin-bottom: 3px;
}

所以当我停留在图像上时,它会向上移动一点,给人一种提升的感觉。问题是,在同一时间,td的高度增加,所以下面的元素被推倒。

如何在提升图像的同时保持td的大小不变。我可以增加td的高度来解决这个问题,但由于这是一个移动网站,我不想设置具体的高度大小,但有它扩大了根据内容内。

我希望这足够清楚。

2 回复 | 直到 14 年前

FelipeAls 14 年前

第一种解决方案(见CSS技巧网站):使用相对定位,如

.ratingstar:hover img, .ratingstar:focus img {
  position: relative;
  bottom: 3px;
}

第二种解决方案:如果您的设计允许,当边距底部从0到3px时,使用填充底部从3到0px。
编辑:也可以是上边框或下边框(如果不是渐变色或图像而是唯一的颜色,则与背景颜色相同)

Dustin Laine 14 年前

可以使用负上边距执行此操作:

.ratingstar:hover img, .ratingstar:focus img
{
   margin-top: -3px;
}

.ratingstar
{
   background-image: url(assets/images/star.png);
   background-position: 0 0;
   background-repeat: no-repeat;
}
.ratingstar:hover img, .ratingstar:focus img
{
   background-position: 0 -3px;
}

推荐文章

Damla Kara · 如何将悬停在React中的特定列表项作为目标?

2 年前

Facundo De Luca · 当鼠标不再停留在初始位置时,返回初始位置

2 年前

Yaswanth G · 如何在Selenium中验证鼠标悬停消息

6 年前

flash · 如何设置bootstrap 4元素的样式?

6 年前

dekzok · 悬停使元素相互重叠

6 年前

thaiten · CSS网格悬停为“shuffeling”

6 年前

adbleke · 悬停时DIV背景颜色更改

6 年前

Natalia · 如何从HTML中调用“hover”上的JS函数?

6 年前

lulZghost · css不透明度转换不工作

6 年前

AFG · 如何在鼠标悬停时播放视频?

6 年前