2

如何让图像叠加层与此代码一起使用？

我想要的是一组图标，当光标移到图像上时，它们会覆盖在图像上。

http://socialartist.co/index.html

有问题的代码是 HTML 5 和 CSS 3，并且有很多标记：

<ul class="items x_columns">
 <li data-id="id-1" data-cat="#luxury">
  <div class="preview"><a href="#" class="frame">
   <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
  </div>
 <a class="title" href="#">Kirkbridge DNB</a>
 <p>UK | Drum and Bass</p>
</li>

当我尝试添加一个新的 div 时，它只是破坏了设计（例如弄乱了预览类边框）

如上所述，是否有“一种简单的方法”来覆盖现有图像。

我真的不知道如何在 Fiddle 上进行设置；我希望 ppl 可以在上面的页面 URL 上使用开发人员工具（检查元素）？

4

2 回答 2

2

如果我做对了：

在锚标签中添加要显示的图标：

快速而肮脏的例子：http: //jsfiddle.net/ZVSVw/

<a href="#" class="frame">
   <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
   <div class=overlay>ICON</div>
</a>

将其设置为display: none默认设置并使用选择器对其进行样式设置.frame:hover > .overlay。

对你的评论

从您的 style.css:1654 中删除以下行：

a > .frame:hover, a.frame:hover{
    background: #ffffff;
    /* border: 1px solid #24bfb6;  remove this line */
}
于 2012-05-03T14:32:18.960 回答
1

您可以使用属性集添加另一个覆盖图片，display: none;然后基本上在两张图片之间切换

Javascript：

jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
    jQuery(this).find('img').toggle();
    jQuery(this).find('div.overlayContent').toggle();
});​

html:

<li data-id="id-3" data-cat="#holiday">
    <div class="preview">
        <a href="#" class="frame">
            <img src="http://..." alt="default picture">
            <div class="overlayContent" style="display: none;">...overlay content</div>
            <!--img src="http://..." alt="alternate picture" style="display: none;"-->
        </a>
    </div>
    <a class="title" href="#">TEST ME!</a>
    <p>Test this one!</p>
</li>
于 2012-05-03T14:52:21.900 回答