1

我正在使用灰度 jquery 插件来动态灰度图像（由 Andrew Pryde 编写）。

效果就像一个魅力： http ://www.reflexion-graphic.com/projets/forum/jquery/greyscale/1-test-jquery-greyScale-html5.html

但我尝试添加另一个 jquery 函数：在翻转时显示图像信息。

该功能单独工作，但使用插件我有一个css问题。图像不再浮动： http ://www.reflexion-graphic.com/projets/forum/jquery/greyscale/3-test-jquery-hover-greyScale-html5.html

你能帮我找出css有什么问题吗？

源代码（在示例中很容易找到 css、html、jquery）。

非常感谢你 ！

4

2 回答 2

1

这是因为您已将带有标题的图像包装在块元素内，这些块元素跨越了其容器的整个宽度。 float适用于灰度图像，而不适用于它们的父元素，因此即使所有图像都是浮动的，它们也不再是彼此的兄弟；它们是悬停包装器的兄弟姐妹。

图像仍然是浮动的，但它们在它们的容器（包装器）内是单独的，并且包装器没有浮动。

您可以在没有任何 JS 的情况下添加悬停标题：只需将标题添加为每个.gsWrapper元素内的另一个元素，并将其设置为在悬停时显示。

精简示例：

<div class="gsWrapper">
  <img class="img_mosaique_cat_projets noir_blanc" src="img/sj-concelles/220x168.jpg" alt="titre projets">
  <canvas class="gsCanvas" height="168" width="220" style="left: 0px; position: absolute; top: 0px;"></canvas>

  <div class="hide-hover">test content for hover</div>
</div>

和造型：

.hide-hover {
  position: absolute;
}

.gsWrapper:not(:hover) .hide-hover { 
  display: none;
}

这样您就不必担心调整所有其他样式和 JS 以适应某些图像的包装器。

其他演示：使用 jQuery slideToggle 效果隐藏/显示标题：http: //jsbin.com/idugaw/3/edit

使用纯 CSS 实现 slideToggle 效果：http: //jsbin.com/idugaw/4/edit

于 2012-10-04T21:25:04.850 回答
0

我认为您需要做的就是将以下代码放入您的 CSS

.imgHover {
  position: relative;
  display: inline-block;
}

Image Hover div 显示为“块”，因此它们胜过 gsWrapper CSS。

于 2012-10-04T21:17:48.493 回答