Javascript z索引qith jquery不适用于旋转图像_Javascript_Jquery_Html_Image_Css

Javascript z索引qith jquery不适用于旋转图像

javascript jquery html image css

Javascript z索引qith jquery不适用于旋转图像,javascript,jquery,html,image,css,Javascript,Jquery,Html,Image,Css,JsFiddle： HTML: JQuery： function pichoverfunc() { $(this).css({"z-index":10}); } function pichoverfuncO() { $(this).css({"z-index":-10}); } $(document).ready( $("#pic2").hover(pichoverfunc, pichoverfuncO) ); 我正在尝试这样做：- 在彼

JsFiddle：

HTML:

JQuery：

function pichoverfunc() {
    $(this).css({"z-index":10});
}

function pichoverfuncO() {
    $(this).css({"z-index":-10});
}


$(document).ready(

        $("#pic2").hover(pichoverfunc, pichoverfuncO)
        );

我正在尝试这样做：-

在彼此顶部显示两个旋转图像

当鼠标悬停在任何图像上方（即使在其egde附近）时，该图像应位于前面，而位于前面的图像应位于后面

这是未来的事情（在我的待办事项列表中）-使用两个以上的图像来实现与步骤2中相同的功能

问题： 1.我不能停留在第二张图片上 2.（这与上面的要求3相联系）如果有两个以上的图像，那么，我应该如何为后面的每个图像选择z索引

我的尝试：-

我已经使用chrome中的开发工具检查了

#pic2

，但是我仍然无法选择它

由于我不熟悉HTML、CSS和Jquery，任何帮助都会很好。

您不需要使用Jquery来更改悬停时的元素。CSS内置了这个功能，看看这个。正如您所看到的，您可以设置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索引，如果您想对许多图像执行此操作，请尝试使用类而不是id，或者只使用标记名。例如，将class=“img hover”分配给您想要的所有图像。然后在css中放入：

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

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

img:hover{
...
}

脚本无法工作的根本原因可能是：

z-index仅适用于位置属性已显式设置为绝对、固定或相对的元素

阅读有关z索引的更多信息：

当涉及到JSFIDLE时，我对它进行了一些清理和简化-

HTML:

CSS:

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

img:hover{
...
}

<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>

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);
});

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);   
}