0
做了一个导航栏，可以在悬停时更改照片。它适用于我的Firefox，但在我的工作中，所有计算机仍然使用IE 8，而且酒吧根本不会显示。Internet Explorer 8 css兼容性
会使它与js会使它更好？ 我知道如何只使用CSS和JS
nav{
background-color: #fff;
width:150px;
height: 667px;
float:right;
}
nav h1{
padding: 20px;
color: #777;
font: 20px tahoma,times,serif;
}
ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
width: 150px;
text-align: right;
}
ul li {
position: relative;
}
li ul {
position: absolute;
right: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
background: #333;
background: url("http://vignette1.wikia.nocookie.net/logopedia/images/6/69/FC-Barcelona-old-logo.png/revision/latest?cb=20120211172615");
background-repeat: no-repeat;
}
.container{
overflow: hidden;
margin-right: 0;
height: 500px;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
width: 800px;
}
.container img{
margin-top: 0px auto;
position: fixed;
top: 0px;
left: 0px;
z-index: -60;
height: 500px;
width: 800px;
}
.container li img {
opacity: 0.5;
margin-top: 0px auto;
position: absolute;
left: 0px;
z-index: -50;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li:nth-child(1){
padding-top: 0px;
}
li a:hover {
background: #eee;
}
li:hover a +img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<LINK rel=stylesheet type="text/css" href="StyleSheet.css"/>
<title></title>
</head>
<body>
<div class="container">
<nav><h1><b>ברצלונה</b></h1>
<ul>
<li><a href="#">ברצלונה</a><img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_BARCELONA-ATLETICO_45.v1431011244.JPG" alt="1"></li>
<li><a href="#">לה ליגה</a><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd6ngNNGapdLhqdS4KbuoNNCaaUMP4Svu-e_9rXMh_wLDtPpSE" alt="1">
<ul>
<li><a href="#">ברצלונה</a></li>
<li><a href="#">ריאל</a></li>
<li><a href="#">אתלטיקו</a></li>
</ul>
</li>
<li><a href="#">בונדסליגה</a><img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1">
<ul>
<li><a href="#">באיירן</a></li>
<li><a href="#">וולפסבורג</a></li>
<li><a href="#">הנדובר</a></li>
<li><a href="#">דורטמונד</a></li>
</ul>
</li>
<li><a href="#">סיירה א</a><img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1">
<ul>
<li><a href="#">אינטר</a></li>
<li><a href="#">מילאן</a></li>
<li><a href="#">יובה</a></li>
<li><a href="#">רומא</a></li>
</ul>
</ul>
</li>
</nav>
</div>
</body>
</html>
在某些情况下，我发现它在某些浏览器中无法正常工作，但在css中指定了两次相同的事情时（我无法记起哪个浏览器）。例如，我看到你正在定义ul两次。尝试只定义ul一次，并将所有规则放在那里。即使这不能解决问题，也更容易阅读和维护:-) – bestprogrammerintheworld