JsFiddle:http://jsfiddle.net/E4s9k/
HTML:
<body>
<section id="pics" class="clearfix">
<figure
id="pic1"
class="pictures"
>
<img
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<figcaption class="figuredetails">Fig1</figcaption>
</figure>
<figure
id="pic2"
class="pictures"
>
<img
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
<figcaption class="figuredetails">Fig2</figcaption>
</figure>
</section>
<section id="content">
<p>hello</p>
</section>
</body>
CSS:-
@CHARSET "UTF-8";
#pics{
width:100%;
padding: 50px 50px;
}
.pictures{
float: left;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
.pictures img{
width:100%;
height:auto;
}
#pic1{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
z-index: -1
}
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
#content{
clear: both;
}
.pictures > .figuredetails{
color: red;
padding-left: 20px;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
JQuery:
function pichoverfunc() {
$(this).css({"z-index":10});
}
function pichoverfuncO() {
$(this).css({"z-index":-10});
}
$(document).ready(
$("#pic2").hover(pichoverfunc, pichoverfuncO)
);
我正在尝试做这样的事情:-
- 在彼此的顶部显示 2 个旋转的图像。
- 当悬停在任何图像上方(甚至靠近其边缘)时，该图像应位于最前面，而位于前面的图像应位于后面
- 这是 future 的事情(在我的待办事项列表中)- 使用 2 个以上的图像来实现与步骤 2 中相同的功能。
问题: 1. 我无法将鼠标悬停在第二张图片上 2.(这与上面的需求3相关联)如果图片超过2张，那么后面的每张图片的z-index应该如何选择？
我尝试过的:-
- 我已经使用 chrome 中的 Dev 工具检查了
#pic2，但我仍然无法选择它。
由于我是 HTML、CSS 和 Jquery 的新手，任何帮助都会很棒。
最佳答案
您不需要使用 Jquery 来更改鼠标悬停时的元素。 CSS 内置了这个功能，看看这个 link .如您所见，您可以将 css 类或 id 设置为在悬停时更改。例如:
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
然后在下面你可以放这样的东西:
#pic2:hover{
z-index:10;
}
这应该仅使用 CSS 更改悬停时 pic2 的 z-index，如果您想对许多图像执行此操作，请尝试使用类而不是 id，或者可能只是使用标签名称来执行此操作。因此，例如将 class="img-hover"分配给您喜欢的所有图像。然后在你的CSS中放:
.img-hover:hover{
z-index:10;
}
或者如果您只想将悬停应用到您刚刚放置的所有 img 标签:
img:hover{
...
}
关于javascript - 带有 jquery 的 z-index 不适用于旋转图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23068101/