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)
);
Я пытаюсь сделать что-то вроде этого:
Проблема: 1. Я не могу навести курсор на втором изображении 2. (Это связано с требованием 3 выше). Если есть более двух изображений, то как мне выбрать z-индекс для каждого изображения, которое находится сзади?
Что я пробовал: -
#pic2
но я все еще не могу выбрать его.Поскольку я новичок в HTML, CSS и JQuery, любая помощь будет отличной.
Коренной причиной, почему ваш скрипт не работает, вероятно, является тот факт, что:
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);
}
Вам не нужно использовать JQuery для изменения элемента при наведении. CSS имеет встроенную функциональность, взгляните на эту ссылку. Как вы можете видеть, вы можете установить класс или идентификатор css для изменения при наведении. Так, например:
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
Затем, ниже, вы можете добавить что-то вроде этого:
#pic2:hover{
z-index:10;
}
Это должно изменить z-index pic2 при наведении только с CSS, также если вы хотите сделать это со многими изображениями, попробуйте использовать класс вместо id или, возможно, просто сделайте это, используя имя тега. Так, например, присвойте class= "img-hover" всем изображениям, которые вам нравятся. Тогда в вашем css поставить:
.img-hover:hover{
z-index:10;
}
или если вы хотите просто применить зависание ко всем img-тегам, которые вы только что поставили:
img:hover{
...
}