1
私は「メニュー」という形で、いくつかの画像を重ねて表示しています。IE7：画像をホバーすると、別の場所に別の画像が表示されます
画像の1つをホバーしている間、別の画像が表示されます。 また、各画像をホバリングしている間に5px（現在は表示されません）まで上がります。
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>EDIT：ソリューション：
.hw {
\t font-size: 50px;
\t padding: 50px;
}
.menu {
\t 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">
\t <p class="hw">Hello World!</p>
\t <div class="menu" style="position: relative; left: 0; top: 0;">
\t \t \t <div class="img-con">
\t \t \t \t <img class="logo" src="http://i.imgur.com/cr2cqPA.png"/>
\t \t \t \t <img class="hidden" src="http://i.imgur.com/MY5bRT1.jpg"/>
\t \t \t </div>
\t
\t \t \t <img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
\t \t \t <img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
\t \t \t <img class="third" src="http://i.imgur.com/cr2cqPA.png"/>
\t \t \t <img class="forth" src="http://i.imgur.com/MY5bRT1.jpg"/>
\t </div>
</div></body>
</html>
IE7？本当に？好奇心のために、なぜIE7の要件？それはビジネス向けですか、このブラウザの使用率が高い地域ですか？ –