Question

我到目前为止（但你不会知道）。在我的艺术网站上苦苦挣扎。

此页面 http://rollinleonard.com/elements/ 这个页面有一个小叠加div，悬停在这些img上。第一个img是div的背景。我希望img也有这种蓝色荧光效果。

如何获得它以使其成为普通的img，然后在另一层img上有我的导航（带有白色背景的文字）？

谢谢！

Answer 1

@ rollin，没有必要使用js检查这个 http://jsfiddle.net/sandeep/f2662/

Answer 2

我最简单的方法是让您的第一个div像其他图片a > img一样，并将nav置于absolute位置。

HTML：

<nav>...</nav>
<a href="#">
   <img src="home.gif" alt="Home BG" />
</a>

CSS：

nav {
   position: absolute;
}

Answer 3

将navwrap-div包装在同一维度的另一个div中，第一个图像作为背景
将navwrap div的背景设置为透明
分配z-index值：0为新包装器，1为原始包装器，2为nav-element
将mouseenter-handler的选择器调整为'img，＃navbg'。您可能还需要保护叠加div上的点击处理程序的动态设置（如果通风目标是新div，则无意义）。

您的代码如下所示：

<div id="navbg" style="width: 300px; height: 300px; z-index: 0; background-image: url('home.gif');"> 
<div style="z-index: 1; background-color: transparent;" id="navwrap">
<nav style="z-index: 2;" >
...
</nav>
</div>
</div>

（仅为演示目的使用样式的内联定义）

最好的问候，carsten

Answer 4

在$（window）.load（）事件

中的js文件中添加它

$('#navwrap').bind('mouseenter', function () {
    var $this = $(this);
    if ($this.not('.over')) {
        $this.addClass('over');
        $overlay.css({
            width  : $this.css('width'),
            height : $this.css('height'), 
            top    : $this.offset().top + 'px',
            left   : $this.offset().left + 'px'
        }).show();
    }
 }).bind('mouseout', function () {
     $(this).removeClass('over');
 });

图像背景突出显示还是Z-index？

4 个答案: