0

我有一个问题需要帮助。谢天谢地，我的代码可以很灵活，所以我只给出一些通用标记。

我的主要限制（由于我从数据库中检索信息的方式）是图像不能是背景图像，否则这很容易。

当我将鼠标悬停在图像上时，我只想改变图像。我制作的图像比我需要的高两倍 - 一半彩色，一半黑白。这个想法是，图像完全相同（一个人） - 但是当你将鼠标悬停在它上面时 - 你会看到彩色版本。

我已经构建了 200 像素宽和 400 像素高的“悬停”图像。它的标记非常简单：

<div class='staff_profile'>
     <h3>Staff Title</h3>
     <div class='staff_image'>
         <img src='.....' alt='....' />
     </div>
</div>

所以我想我需要类似的东西：

.staff_image {
   float: left;
   height: 200px;
   width: 200px;
}

问题是 - 使用这个，默认情况下，400px 高的图像显示在该 staff_image div 的中心 - 所以我看到一半黑白照片，一半彩色。

我将使用 jQuery 进行悬停 - 所以只需要一些关于我需要使用哪些属性的 CSS 提示：

  1. 将图像显示在最顶部
  2. 让图像从一半向下显示

我尝试使用填充和边距的所有内容似乎都会将所有内容向下推，并且根本不会将实际图片移动到里面。我基本上需要知道如何操纵一个对于该 div 内的固定高度 div 来说太高的图像。我在这里能找到的答案似乎都没有帮助。有很多关于使图像居中的方法-但居中不是我想要做的-恰恰相反！:)

谢谢你的帮助。

4

1 回答 1

1

给你：http: //jsfiddle.net/xqxSK/

<div class='staff_profile'>
     <h3>Staff Title</h3>
     <div class='staff_image'>
         <img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
     </div>
</div>

.staff_image {
    overflow: hidden;
    height: 200px;
}
.staff_image img {
    position: relative;
}

.staff_image:hover img {
   top: -200px;
}

我使用 CSS 而不是 jquery 进行悬停。这是一种更好的方法，因为它在触摸屏设备上效果更好。

于 2013-08-15T22:49:09.100 回答