Question

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个旋转的图像。
当悬停在任何图像上方（甚至靠近它的egde）时，该图像应该出现在前面，而前面的图像应该返回
这是未来的事情（在我的待办事项列表中） - 使用2个以上的图像来实现与步骤2中相同的功能。

问题： 我不能在第二张图片上盘旋 2.（这与上面的要求3相关）如果有超过2个图像，那么，我该如何为后面的每个图像选择z-index？

我尝试了什么： -

我使用chrome中的Dev工具来检查#pic2，但我仍然无法选择它。

由于我是HTML，CSS和Jquery的新手，任何帮助都会很棒。

Answer 1

您不需要使用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 =＆＃34; img-hover＆＃34;你想要的所有图像。然后在你的css中：

.img-hover:hover{
z-index:10;
}

或者如果您只想将悬停应用于您刚放入的所有img标记：

img:hover{
...
}

Answer 2

您的脚本不起作用的根本原因可能是：

z-index仅适用于其position属性已明确设置为绝对，固定或相对的元素。

阅读有关z-index的更多信息：http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

说到你的JSFiddle，我把它清理了一下并简化了一点 - http://jsfiddle.net/E4s9k/

HTML：

<body>
 <img
     id="pic1"
     alt="figure1"
     src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
     title="pic1"
 >
 <img
     id="pic2"
     alt="figure2"
     src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
     title="pic2"
 >
</body>

JS：

function handlerIn() {
    $('img').css({"z-index": -10}); //Push all images back
    $(this).css({"z-index": 10}); //Bring our target to front
}

function handlerOut() {
    $('img').css({"z-index": 10}); //Bring all our images to front
    $(this).css({"z-index": -10}); //Push target back
}

$(document).ready(function(){
    $("img").hover(handlerIn, handlerOut);
});

CSS：

img {
    position: relative;
    width:200px;
    height:200px;
    box-shadow: 10px 10px 5px #888888;
}

#pic1{
    -ms-transform: rotate(30deg); 
    -webkit-transform: rotate(30deg); 
    transform: rotate(30deg);
} 

#pic2{
    -ms-transform: rotate(50deg); 
    -webkit-transform: rotate(50deg); 
    transform: rotate(50deg);   
}

z-index，jquery无法处理旋转图像

2 个答案: