При наведении курсора вниз изображения сбрасывают другие изображения

Question

При наведении курсора вниз изображения сбрасывают другие изображения

0

У меня возникла проблема с изображениями веб-сайта, который я делаю. Я пытался по-разному решить эту проблему, и это было лучшее, что я нашел до сих пор. Тем не менее, это не то, что мне нужно. У меня есть 8 кнопок, и мне нужен второй, который нужно заменить большим изображением. Дело в том, что он тянет остальных вниз, и я хотел, чтобы это было над ними. Есть ли способ сделать это? Это то, что я сделал в кодировании:

<a href="index.html">
<input type="image" src="hp-homebutton.png" alt="submit" style="position: relative;" value="Home Button"/> </a> <p>
<img src="hp-monthsbutton.png" onmouseover="this.src='hp-months.png'" onmouseout="this.src='hp-monthsbutton.png'" style="position: relative;"/> <p>
<img src="hp-forumbutton.png" style="position: relative;"/> <p>
<img src="hp-newsbutton.png" style="position: relative;"/> <p>
<img src="hp-contactbutton.png" style="position: relative;"/> <p>
<input type="image" src="hp-eventsbutton.png" alt="submit" style="position: relative;" value="Events Button" onclick="showImage();"/> <p>
<img src="hp-gallerybutton.png" style="position: relative;"/> <p>
<img src="hp-extrasbutton.png" style="position: relative;"/> <p>

Caracks 23 апр. 2014, в 18:38

Источник

Теги:

html

image

mouseover

1 ответ

Ещё вопросы

Andy · Accepted Answer · 2014-04-23T14-18-00.000Z

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

Демо-версия JSFiddle

HTML

<ul>
    <li><a href="index.html"><img src="http://s21.postimg.org/hzb9gge93/hp_homebutton.png" alt="Home" /></a></li>
    <li><a href="#"><img src="http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png" alt="Months" onmouseover="this.src='http://s21.postimg.org/8ssyt690n/hp_months.png'" onmouseout="this.src='http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png'" class="months" /></li>
    <li><a href="#"><img src="http://s21.postimg.org/rer4tnw9z/hp_forumbutton.png" alt="Forum" /></li>
    <li><a href="#"><img src="http://s21.postimg.org/ig12gmrdz/hp_newsbutton.png" alt="News" /></li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    clear: both;
    height: 54px;
}

ul li img {
    position: relative;
    z-index: 1;
}

ul li .months {
    z-index: 2;
}

Я пытался сделать то, что вы предложили, но я все еще нахожу некоторые проблемы с кодированием. Дело в том, что если я изменю положение изображения на абсолютное, но это только заставит других покрыть это. <div style="position: relative;"> <img src="hp-monthsbutton.png" onmouseover="this.src='hp-months.png'" onmouseout="this.src='hp-monthsbutton.png'" style="position: absolute;"/> <p> </div>
@Caracks Можете ли вы создать JSFiddle, демонстрирующий проблему? Тогда я смогу помочь вам в дальнейшем.
Хорошо, я создал JSFiddle, показывая проблему. jsfiddle.net/LB24X Как вы можете видеть, второе изображение, поскольку оно является position: absolute , заставляет других покрывать его. Вы все еще можете сделать изображение наведения мышью и увидеть его под остальными.
@ Караки Хорошо, я понимаю, что ты хочешь делать сейчас. Я отредактировал свой ответ, чтобы показать вам лучший способ сделать это.