的z-index qith jQuery的

的jsfiddle：http://jsfiddle.net/E4s9k/的z-index qith jQuery的

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幅圖像，以實現相同的功能，在步驟2

問題： 1.我不能在第二圖像上懸停 2（這一點與上述的要求3）如果有超過2張圖像，那麼我應該如何選擇背面每張圖像的z-index？

我已經試過： -

我使用的開發工具中鉻視察#pic2，但是，我還是不能選擇它。

由於我是HTML，CSS和Jquery的新手，任何幫助都會很棒。

來源

2014-04-14 GodMan

你不需要使用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指數上徘徊，如果你還想做這個與許多圖像嘗試使用類而不是一個ID或可能只是使用標籤名稱。因此，例如將class =「img-hover」分配給您喜歡的所有圖像。然後在你的CSS的說：

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

，或者如果你想懸停只適用於所有的img標籤你幾乎只是把：

img:hover{ 
... 
}

來源

2014-04-14 19:30:06

的根本原因，爲什麼你的腳本不工作，可能是事實，即：

z-index只對位置屬性已明確設置爲絕對，固定或相對的元素起作用。

當涉及到你的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); 
}

來源

2014-04-14 20:00:13 tiblu

的z-index qith jQuery的

回答

相關問題