image - 另一个图像上的透明图像作为悬停

Question

悬停后，我正在尝试解决另一张图片上的图像问题。

我发现了这个：http ://demo.fearlessflyer.com/html/demo/pretty-hovers/ ，但我无法从中删除标题。

我当前的代码非常简单：

HTML：

<div id="gallery">
<img src="img/w.jpg" alt="" />
<img src="img/sr.jpg" alt="" />
<img src="img/as.jpg" alt="" />
</div>

CSS：

#gallery  img { width: 160px; height: 160px; padding: 4px; border: 1px #666 solid; }

我想避免在 HTML 代码中放置任何容器、跨度、类等。我更喜欢在 CSS/JS 源代码中使用它。

我想要类似的效果：

http://oi44.tinypic.com/eq6phd.jpg

感谢您的回复。

问候。

Answer 1

是否有特殊原因迫使您避免使用 div 元素？虽然我相信没有这些是可能的，但我怀疑你会找到一个“不错”的解决方案。我可能会尝试类似：

html:

<div id="gallery">
 ...
 <div id="DivToHover1"><img id="imgToHide" src="yourTransparentPicture"/></div>
 ...
</div>

CSS：

...
#DivToHover1 {
  height: "your picture height";
  width: "your picture width";
  background-image:url("yourpicture");
}

#imgToHide {
  display:none;
}
...

js：

...
$("#DivToHover1").hover(function() {
  $("#imgToHide").show();
  //do some more funky stuff
});
...