jQuery抓取图像的高度来检查是否一定高度

Question

我正在为我的网站制作一个 css 悬停图像。因此，当人们上传他们的图像并查看缩略图时，他们可以滚动它们并查看完整图像。我的问题出现在定位悬停图像时。感觉其中一些是垂直的，一些是水平的，它们需要以不同的方式定位，以免与缩略图重叠。

为了尝试解决这个问题，我认为最简单的方法是在 jQuery 中获取高度，然后如果它根据高度是垂直的，则使用 .css() 函数将其向上移动.但是，我似乎在检索图像的高度时遇到了问题。我知道我可以为每个图像分配高度属性，但我有点想避免这种情况，因为无论是垂直还是水平，高度都会发生变化。

我在 jsFiddle 中构建了一个小示例，以尝试更轻松地解决问题。 http://jsfiddle.net/nYC6C/2/

我的 html 看起来像这样，除了循环遍历所有图像。

<ul class="imgLinks intImg enlarge">
  <loop code here>
  <li class="widImg">
    <p class="imgContain">
       <span class="fImg">
        <a  target="_blank"  title="cat" href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg" target="_blank"/>
       </a>
         <form>
          <input type="submit" class="notification badgeInput badge badge-important" name="" value="X"  />
         </form>
       </span>

       <p class="imgTitle">Title</p>
       <p class="imgTitle imageNum" style="padding-top: 0; line-height: 10px;"></p>
     </p>
    <img class="largeImg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg" />

  </li>
  <end loop code>
 </ul>

还有我一直在玩的 jQuery。

$('.largeImg').each(function(i) {
    var num = i + 1;
  console.log('image'+ num + ' '+ $(this).height());
});

任何帮助都会很棒!

Answer 1

尝试将它从缩略图的底部对齐，如果它的高度相同，您可以将悬停大图像设置为底部距离而不是顶部距离。

它会是这样的。

    ul.enlarge li:hover .largeImg{ 
bottom: 190px;
left: 0;}

FIDDLE