Как мне динамически изменить z-индекс фотографии?

Question

Я хочу изменить z-index изображения в группе фотографий, которые я абсолютно позиционирую в элементе тела.Мне бы хотелось, чтобы при наведении на изображение его размер увеличивался с помощью преобразования веб-набора в CSS.

Проблема в том, что изображения в моем HTML-стеке располагаются выше по порядку, чем над изображениями ниже.Я хотел бы иметь скрипт, который увеличивает z-index файла, чтобы при наведении на него он не появлялся за соседней фотографией.

Я потратил некоторое время на поиск z-index файлов дополнений, так как в моей голове вы просто продолжаете увеличивать z-index в бесконечность с помощью файла jquery, но я не знаю, как это кодировать.

По сути, я хочу, чтобы группировка фотографий рядом друг с другом не перекрывала друг друга при увеличении их размера.

Это возможно?

Answer 1

С CSS что-то вроде:

.photo_group .photo:hover {
    z-index: 1000; /* May depend on over indices defined! */
}

Пожалуйста, опубликуйте HTML-код, если вам нужны точные CSS-коды / имена классов. Это всего лишь образец.

Answer 2

Как это?:

  <style>
  img{
      position:absolute;
  }
  img.apple{
      top: 40px;
      left: 0px;
  }
  img.ipod{
      top: 50px;
      left: 50px;
  }
  img.thanks{
      top: 0px;
      left: 0px;
  }
</style>


<script type="text/javascript">
function increaseZIndex(obj){
    obj.style.zIndex = 1;
}
function decreaseZIndex(obj){
    obj.style.zIndex = 0;
}
</script>
<img src='http://images.apple.com/home/images/billboard_25b_thankyou_headline_Yr4p8DedLk7y.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='thankyou'/>
<img src='http://edibleapple.com/wp-content/uploads/2009/04/silver-apple-logo.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='apple'/>
<img src='http://www.ipod.org.uk/ipod_nano.jpg' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='ipod' />​​​​​​​​​​​​​​​​​​​​​​​​​​​

Смотрите это в действии на JSFiddle