我无法找到解决方法来修复当我将鼠标悬停在此div上以显示gif时发生的闪烁。 HERE就是我所说的一个例子。
代码可以正常使用jpgs ...但不能使用gif。我不认为这是重叠或预加载的问题。
我还注意到前3个div在悬停时不会闪烁。问题只发生在第三个div之后。
有谁知道可能导致此问题的原因？
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}a:link {
text-decoration: underline;
text-align: center;
cursor:pointer;
color: black;
text-decoration: none;
}
a:visited {
cursor:pointer;
color: black;
}
a:hover {
color:black;
cursor:pointer;
color: black;
border-bottom: 1px solid black;
}
a:active {
color: black;
}
#imagebox{
width:100%;
position: fixed;
text-align: center;
top: 50%;
left:50%;
}
#list{
top:25px;
width: 40px;
height: 35px;
text-align: left;
right:25px;
position: fixed;
background: url("../images/L.png");
cursor:pointer;
border-bottom:none;
}
}
#list.hover{
border-bottom:none;
}
#Style{
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleX {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleY {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleZ {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleA {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleB {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleC {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleD {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}
#StyleE {
position:absolute;
visibility:hidden;
transform: translate(-50%, -50%);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
}<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="image/png" href="../images/favicon.png"/>
<meta charset="utf-8">
<title>Lily Clark</title>
<link rel="stylesheet" href="css/main.css">
<script src="javascrip.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<a href="http://www.lilyclark.com/about" id="list"></a>
<a href="#" onmouseEnter="ShowPicture('Style',1)" onmouseLeave="ShowPicture('Style',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Column Vase</span><span id="date">2016 for <a href"http://www.feel.company">FEEL</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleD',1)" onmouseLeave="ShowPicture('StyleD',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Gravity is Stronger Here</span><span id="date">2015 for <a href"http://www.landl.us">L+L</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleY',1)" onmouseLeave="ShowPicture('StyleY',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Blinds Be­tween Boul­ders</span><span id="date">2015 Jumbo Rocks, Joshua Tree</span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleX',1)" onmouseLeave="ShowPicture('StyleX',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Fli­cker Ton­ic</span><span id="date">2015 for Tilt</span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleC',1)" onmouseLeave="ShowPicture('StyleC',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Printed Shards</span><span id="date">2015 with <a href"http://www.tristanscow.com/">Tristan Scow</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleE',1)" onmouseLeave="ShowPicture('StyleE',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Bound 2</span><span id="date">2015 for <a href"http://contemporary.org">The Contemporary</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleA',1)" onmouseLeave="ShowPicture('StyleA',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Novacom/Basin</span><span id="date">2015 with <a href"https://slumdiscs.bandcamp.com/merch/slumdiscs-01">Slum­discs</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleB',1)" onmouseLeave="ShowPicture('StyleB',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Oh So Cards</span><span id="date">2015 for <a href="https://www.youtube.com/watch?v=KT5nXzQLhDI">Budget Prom</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleZ',1)" onmouseLeave="ShowPicture('StyleZ',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Ra­king Light</span><span id="date">2014 </span>
</div>
<div id="imagebox">
<div id="Style"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;"></div>
<div id="StyleX"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.giff"style="width:70%;"></div>
<div id="StyleY"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div>
<div id="StyleZ"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div>
<div id="StyleA"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div>
<div id="StyleB"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div>
<div id="StyleC"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div>
<div id="StyleD"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div>
<div id="StyleE"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div>
</div>
</body>
</html>
答案 0 :(得分：1)
如果你使用opacity而不是visibility，你可以引入一个小的transition并看到图片混合（如果它们不同），对于演示我添加了一个transform:scale(x)其中很少。
注意：您可以使用[id ^ = startwth＆＃34;]减少ID上使用的选择器的数量，或者您也可以添加一个公共类。 请注意，ID只能使用一次。
function ShowPicture(id, Source) {
if (Source == "1") {
if (document.layers) document.layers['' + id + ''].opacity = "1"
else if (document.all) document.all['' + id + ''].style.opacity = "1"
else if (document.getElementById) document.getElementById('' + id + '').style.opacity = "1"
} else
if (Source == "0") {
if (document.layers) document.layers['' + id + ''].opacity = "0"
else if (document.all) document.all['' + id + ''].style.opacity = "0"
else if (document.getElementById) document.getElementById('' + id + '').style.opacity = "0"
}
}a:link {
text-decoration: underline;
text-align: center;
cursor: pointer;
color: black;
text-decoration: none;
}
a:visited {
cursor: pointer;
color: black;
}
a:hover {
color: black;
cursor: pointer;
color: black;
border-bottom: 1px solid black;
}
a:active {
color: black;
}
#imagebox {
width: 100%;
position: fixed;
text-align: center;
top: 50%;
left: 50%;
}
#list {
top: 25px;
width: 40px;
height: 35px;
text-align: left;
right: 25px;
position: fixed;
background: url("../images/L.png");
cursor: pointer;
border-bottom: none;
}
}
#list.hover {
border-bottom: none;
}
div[id^=Style] {
position: absolute;
transform: translate(-50%, -50%);
opacity: 0;
transition: 0.5s;
}
div[id^=Style]:nth-child(odd) img {
transform: scale(1.2);
}<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="image/png" href="../images/favicon.png" />
<meta charset="utf-8">
<title>Lily Clark</title>
<link rel="stylesheet" href="css/main.css">
<script src="javascrip.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<a href="http://www.lilyclark.com/about" id="list"></a>
<a href="#" onmouseEnter="ShowPicture('Style',1)" onmouseLeave="ShowPicture('Style',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Column Vase</span><span id="date">2016 for <a href"http://www.feel.company">FEEL</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleD',1)" onmouseLeave="ShowPicture('StyleD',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Gravity is Stronger Here</span><span id="date">2015 for <a href"http://www.landl.us">L+L</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleY',1)" onmouseLeave="ShowPicture('StyleY',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Blinds Be­tween Boul­ders</span><span id="date">2015 Jumbo Rocks, Joshua Tree</span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleZ',1)" onmouseLeave="ShowPicture('StyleZ',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Fli­cker Ton­ic</span><span id="date">2015 for Tilt</span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleC',1)" onmouseLeave="ShowPicture('StyleC',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Printed Shards</span><span id="date">2015 with <a href"http://www.tristanscow.com/">Tristan Scow</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleE',1)" onmouseLeave="ShowPicture('StyleE',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Bound 2</span><span id="date">2015 for <a href"http://contemporary.org">The Contemporary</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleA',1)" onmouseLeave="ShowPicture('StyleA',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Novacom/Basin</span><span id="date">2015 with <a href"https://slumdiscs.bandcamp.com/merch/slumdiscs-01">Slum­discs</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleB',1)" onmouseLeave="ShowPicture('StyleB',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Oh So Cards</span><span id="date">2015 for <a href="https://www.youtube.com/watch?v=KT5nXzQLhDI">Budget Prom</a></span>
<br>
<a href="#" onmouseEnter="ShowPicture('StyleZ',1)" onmouseLeave="ShowPicture('StyleZ',0)" id="squareone">
<img src="images/V1.jpg" style="width:25px; height:25px;">
</a><span id="pname">Ra­king Light</span><span id="date">2014 </span>
</div>
<div id="imagebox">
<div id="Style">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
<div id="StyleX">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.giff" style="width:70%;">
</div>
<div id="StyleY">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
<div id="StyleZ">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
<div id="StyleA">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
<div id="StyleB">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
<div id="StyleC">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
<div id="StyleD">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
<div id="StyleE">
<img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;">
</div>
</div>
</body>
</html>