jquery - 带有灰度 jquery 插件和简单 jquery 函数的 CSS 问题(无 float 图像)

Question

我正在使用灰度 jquery 插件动态地对图像进行灰度化(作者:Andrew Pryde)。

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

但我尝试添加另一个 jquery 函数:在鼠标悬停时在图像上显示信息。

该功能可单独使用，但在使用插件时我遇到了 CSS 问题。图像不再 float : http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/3-test-jquery-hover-greyScale-html5.html

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

源代码(示例中很容易找到css、html、jquery)。

非常感谢!

Answer 1

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

图像仍然 float ，但它们单独在容器(包装器)内，并且包装器没有 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