z-index qith jquery не работает на повернутом изображении

Question

z-index qith jquery не работает на повернутом изображении

0

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.

Проблема: 1. Я не могу навести курсор на втором изображении 2. (Это связано с требованием 3 выше). Если есть более двух изображений, то как мне выбрать z-индекс для каждого изображения, которое находится сзади?

Что я пробовал: -

Я использовал инструменты Dev в chrome для проверки #pic2 но я все еще не могу выбрать его.

Поскольку я новичок в HTML, CSS и JQuery, любая помощь будет отличной.

GodMan 14 апр. 2014, в 21:53

Источник

Теги:

javascript

jquery

html

css3

image

2 ответа

Ещё вопросы

tiblu · Answer 1 · 2014-04-14T18-34-00.000Z

Коренной причиной, почему ваш скрипт не работает, вероятно, является тот факт, что:

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

Joe Komputer · Answer 2 · 2014-04-14T18-13-00.000Z

Вам не нужно использовать 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{
...
}