IE7: Наведение курсора мыши на изображение покажет другое изображение в другом месте

ProgramBox

IE7: Наведение курсора мыши на изображение покажет другое изображение в другом месте

Post author:admin
Запись опубликована:15 апреля, 2023
Post category:Вопросы по программированию

#html #css #hover

#HTML #css #наведите

Вопрос:

У меня есть несколько изображений, расположенных друг над другом в виде «меню».

Я хотел бы, чтобы при наведении курсора мыши на одно из изображений отображалось другое изображение. Я также хотел бы, чтобы при наведении курсора на каждое изображение оно увеличивалось на 5 пикселей (в настоящее время этого не происходит).

Он должен поддерживать Internet Explorer 7 или выше.

Я надеюсь, что то, что я запросил, возможно, и действительно ценю любую помощь, которую вы можете предоставить.

Мой код пока:

 .hw { font-size: 50px; padding: 50px; }

.first {
  position: relative;
  top: 0;
  left: 0;
}

.second {
  position: absolute;
  right: 180px;
}

.third {
  position: absolute;
  right: 360px;
}

.logo {
  position: relative;
  bottom:60px;
  left: 100px;
}

.first:hover, .second:hover, third:hover {
  bottom: 5px;
}

.hidden {
  display: none;
}

.logo:hover .hidden {
  display: block;
}

 <!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body dir="rtl">
  
  <p class="hw">Hello World!</p>
  
  
  <img class="hidden" src="http://i.imgur.com/MY5bRT1.jpg" style="position: relative; bottom: 80px; right: 500px;"/>
  
  <div style="position: relative; left: 0; top: 0;">
    <img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
    <img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
    <img class="third" src="http://i.imgur.com/cr2cqPA.png"/>
    <img class="logo" src="http://i.imgur.com/MY5bRT1.jpg"/>
  </div>

</body>
</html>

РЕДАКТИРОВАТЬ: решение:

 .hw {
	font-size: 50px;
	padding: 50px;
}

.menu {
	margin-right:300px;
}

.first {
  position: relative;
  top: 0;
}

.second {
  position: absolute;
  right: 180px;
}

.third {
  position: absolute;
  right: 360px;
}

.forth {
  position: absolute;
  right: 540px;
}

.logo {
  position: relative;
  bottom:60px;
  left: 100px;
}

.first:hover, .second:hover, .third:hover, .forth:hover {
  margin-top: 3px;
}

.img-con {
  position: relative;
  width: 300px;
  padding-top: 50px;
  z-index: 9998;
}

.img-con > img {
  position: absolute;
  top: 0;
  left: 0;
}

.img-con > img.logo {
  z-index: 1;
}

.img-con:hover > img.logo {
  z-index: -1;
  margin-top: 3px;
}

.img-con:hover > img.hidden {
  top: -100px;
  right: 500px;
}

 <!DOCTYPE html>
<html>
<head>
<title>bla bla</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body dir="rtl"><div class="center">
	<p class="hw">Hello World!</p>
  
	<div class="menu" style="position: relative; left: 0; top: 0;">
			<div class="img-con">
				<img class="logo" src="http://i.imgur.com/cr2cqPA.png"/>
				<img class="hidden" src="http://i.imgur.com/MY5bRT1.jpg"/>
			</div>
	  
			<img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
			<img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
			<img class="third" src="http://i.imgur.com/cr2cqPA.png"/>
			<img class="forth" src="http://i.imgur.com/MY5bRT1.jpg"/>
	</div>
</div></body>
</html>

Ответ №1:

Я нашел решение для вас. Вам нужно вставить каждые два изображения в контейнер и задать ему Relative позицию. Ваши изображения устанавливаются по Absolute позиции, и вы можете z-index продолжать :hover с ними играть, чтобы получить разрешение.

Поехали:

 .img-con {
  position: relative;
  width: 400px;
  margin: 20px;
}

.img-con > img {
  position: absolute;
  top: 0;
  left: 0;
}

.img-con > img.first {
  z-index: 1;
}

.img-con:hover > img.first {
  z-index: -1;
}

.img-con:hover > img.second {
  top: -5px;
  left: 5px;
}

 <div class="img-con">
    <img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
    <img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>

1. Просто на беглый взгляд: IE7 не поддерживает first-child or last-child , поэтому я не понимаю, как это будет работать.

2. После небольших изменений мне удалось заставить его работать! Это работает отлично! Огромное вам спасибо. Я действительно ценю это. Теперь осталось только… почему я не могу заставить три изображения перемещаться вверх при наведении курсора мыши (в настоящее время это делает только среднее изображение). Опубликую свой код, как только все будет исправлено.

3. Вы не можете использовать 3 изображения, потому что у вас есть только 1 событие (наведение курсора мыши). Вы можете добавить новое событие, такое как focus или active.

4. Я имел в виду, что я хотел бы, чтобы каждое изображение увеличивалось на 3 пикселя при наведении курсора мыши на конкретное изображение. В настоящее время я могу только заставить их отключиться.

5. Ценю всю вашу помощь! большое вам спасибо.