как нанести изображение на изображение в li, которое (при наведении) меняет свой z-индекс - PullRequest
Новая
       31

как нанести изображение на изображение в li, которое (при наведении) меняет свой z-индекс

0 голосов
/ 27 декабря 2011

У меня есть следующее изображение в li: 

  <ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /></a> </li>
</ul>

Мой CSS выглядит следующим образом: 

ul.columns li img {
        position: relative;
        }

    ul.columns li:hover img{
        z-index: 999;
        }

Что он делает: Когда я наводю указатель мыши на изображение (test.png), изображение получает новый z-индекс.Это необходимо для того, чтобы изображение оставалось видимым (при наведении курсора отображается div, а изображение должно оставаться поверх него).Все это прекрасно работает.

Теперь я хочу, чтобы изображение в верхнем правом углу (отображало X, поэтому давайте назовем его x.png) поверх обычного изображения.Как это сделать?Создание test.png фонового изображения не вариант.Поиграл с некоторыми классами и z-index, но второе изображение всегда появляется помимо изображения test.png.Я думаю, что я делаю что-то не так с CSS, но я не знаю, как z-индексировать второе изображение в li

У меня есть этот atm: 

<ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /> <img class="x" src="images/x.png" alt="" /></a> </li>
</ul>

Спасибо

Ответы [ 2 ]

2 голосов
/ 27 декабря 2011

попробуйте что-то вроде 

 ul.columns li img,
 ul.columns li {
    position: relative; /* so the close image is relatively 
                           positioned inside <li> */
    z-index : 1;
 }

 ul.columns li img + img {
    position: absolute;
    top     : 0;
    right   : 0;
    display : none;
 }

 ul.columns li:hover img { z-index: 999; }
 ul.columns li:hover img + img  { z-index : 1000; display: block; }
1 голос
/ 27 декабря 2011

Может быть, вы пытаетесь сделать что-то вроде этого http://jsfiddle.net/GvWaZ/1/

Вы должны использовать position:relative в своей ссылке, поэтому, когда вы используете стиль right:0, изображение идет справа от якоря. 

.columns a {
    position:relative;
}
.colums a .x {
    right: 0;
    top: 0;
    z-index: -1;
}

Также, обратитесь к закрытому второму изображению по его классу x, как в этом стиле CSS: 

.columns a:hover .x {
    z-index: 999;
    /* class="x" specific hover styles */
}
...