Question

我正在尝试创建松散堆叠的宝丽来照片形式的按钮，我想得到用户将鼠标悬挂在堆叠顶部的那些宝石。

我试图用一个简单的方法来实现这个目标：

#polaroid a hover{
z-index:15;
}

我认为理论上这可以将宝丽来带到最顶端，因为当前“最高”宝丽来是z-index：13;

但是，这根本不起作用，我认为我做错了，可能需要一些javascript来实现这一点。

我目前的代码是......

HTML

<a id="polaroid_home" href="index.html"></a>
<a id="polaroid_about" href="index.html"></a>
<a id="polaroid_portfolio" href="index.html"></a>
<a id="polaroid_contact" href="index.html"></a>

我已将所有这些设置为链接到index.html以进行测试。

CSS

#polaroid_home{
position:absolute;
width:175px;
height:215px;
left:670px;
top:140px;
background-image:url(../Images/polaroid-home.png);
background-repeat:no-repeat;
z-index:13;
}


#polaroid_home a:hover{
z-index:15;

}

#polaroid_about{
position:absolute;
width:175px;
height:215px;
left:765px;
top:175px;
background-image:url(../Images/polaroid-about.png);
background-repeat:no-repeat;
z-index:12;
}

#polaroid_about a:hover{
z-index:15;

}

#polaroid_portfolio{
position:absolute;
width:175px;
height:215px;
left:620px;
top:255px;
background-image:url(../Images/polaroid-portfolio.png);
background-repeat:no-repeat;
z-index:10;
}

#polaroid_portfolio a:hover{
z-index:15;

}

#polaroid_contact{
position:absolute;
width:210px;
height:235px;
left:740px;
top:310px;
background-image:url(../Images/polaroid-contact.png);
background-repeat:no-repeat;
z-index:11;
}

#polaroid_contact a:hover{
z-index:15;

}

我在页面的其他地方使用JavaScript并使用它：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

我不知道如何使用JavaScript，所以我认为这只是重要的。

我做了一些明显错误的事情，或者这种方法不起作用？

我有什么方法可以通过CSS实现这一点，如果没有，JavaScript会是什么？

Answer 1

有几点想法：

包含元素（父级，祖父级等）需要position: relative才能为position: absolute和z-index创建一个坐标系。
有几个MSIE错误涉及这样的东西，所以检查你需要支持哪些版本，然后确保它适用于这些浏览器和/或正常失败。

Answer 2

删除' a'，例如，'#polaroid_contact a:hover'看起来像'#polaroid_contact:hover'。

当用户将鼠标悬停在div上时，如何更改div的z-index？

2 个答案: