jQuery的淡入淡出悬停4期

我有一个jQuery褪色四期黑色图像悬停：jQuery的淡入淡出悬停4期

- 首先是一个小问题 - 周围有图像的黑色边框，我不能摆脱。
- 第二个是occasionaly悬停图像之一的尺寸（参见附图）
减小 - 其三是，我似乎无法增加悬停
- 四是我想要居中的文字出现在悬停上

我真的很新，所以任何这些问题的任何帮助将不胜感激。在此先感谢。

这里是CSS：

@charset "UTF-8"; 
/* CSS Document */ 

body { 
    font-family: 'Questrial', sans-serif; 
    background:#f5f5f5; 
    border-bottom-left:25px; 
    border-left-color:#F0EFF1; 
    border-left-height:1000px; 
    } 

#border { 
    position:fixed; 
    width:37px; 
    height:8000px; 
    margin-left:-10px; 
    margin-top:0px; 
    z-index:2000; 
    background-color:#f5f5f5; 
    } 

#infoleft 
    { 
    position:fixed; 
    top:20px; 
    left:25px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.14em; 
    line-height:1.2em; 
    display:block; 
    } 

#infoleft ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 14.5px; 
    letter-spacing: 1px; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    } 

#infoleft ul li { 
    display: inline; 
    padding: 10px; 
    } 


#inforight 
    { 
    position:fixed; 
    top:21px; 
    right:23px; 
    font-weight:normal; 
    font-size: 14.5px; 
    letter-spacing: 1pxem; 
    } 


#inforight ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    } 


#images { 
    position:absolute; 
    left:30px; 
    bottom:35px; 
    top:100px; 
    width:25000px; 
    padding-top:80px; 
    min-height:500px; 



} 

img { 
    padding:5px; 
    height:90%; 
} 

#images a { 
    display: inline-block; 
    background: black; 
    margin-right: 3px; 
    /*adjust to your linking*/ 
} 

#images img { 
    pading: 5,5,5,5,; 
} 

img a:hover { 
    color:black; 
    opacity:1; 
} 

a { 
    text-decoration:none; 
    color:#000; 
} 

a:hover { 
    color:#0080ff; 
} 

#showinfo { 
    position:fixed; 
    top:150px; 
    left:35px; 
    width:20px; 
    height:20px; 
    font-size:15px; 
    z-index:2000; 
} 

#showinfo a { 
    color:#000; 
} 

#showinfo a:hover { 
    color:#0080ff; 
    cursor:pointer; 
} 


#projectInfo { 
    position: fixed; 
    background: #f5f5f5; 
    top: 185px; 
    left: 5px; 
    width: 280px; 
    z-index: 1000; 
    padding: 20px 32px 32px 30px; 
    height: 280px; 
    font-size: 13.5px; 
    line-height:1.4em; 
    letter-spacing:0.13em; 
}

和HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type='text/javascript' src='jquery.js'></script> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Dean Pauley — Recent work</title> 
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script defer src="js/script.js"></script> 
</head> 
<body> 
<div id="showinfo"> 
<a href="#" id="showProjectInfo"><span id="showhide">[+]</span></a> 
</div> 
<div id="projectInfo" style="display: block; "> 
      <p>News from Nowhere</p>        
      <p>—</p> 
      <p>A response to The Tyranny of Email by John Freeman exploring how the quality of the written word has deteriorated due to the faster methods of digital communication by contrasting it with that of a pre-digital era. The leather bound-book consists of over 3000 different spam emails. 

</p> 
</div> 
<div id="border"> 
</div> 
<div id="infoleft"> 
<ul> 
<li><a href="index.html">Dean Pauley</a></li> 
<li>Graphic Design</li> 
<li>[email protected]</li> 
<li>+44(0)7969 652 219</li> 
</ul> 
</div> 
<div id="inforight"> 
<ul> 
<li><a href="info.html" class="transition">Information</a></li> 
</ul> 
</div> 
<div id="images"> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("img").hover(function() { 
     $(this).stop().animate({opacity: "0.2"}, '300'); 
    }, 
    function() { 
     $(this).stop().animate({opacity: "1"}, '300'); 
    }); 
    }); 
</script> 

    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script> 


<script type="text/javascript"> 
$(document).ready(function(){ 
     $("projectinfo").hide(); 
     $("showprojectinfo").show(); 
    $('.show_hide').click(function(){ 
    $("projectinfo").slideToggle(); 
    }); 
}); 
</script> 
<script src="js/script.min.js"></script> 
</body> 


</html>

截图：

Image with unwanted border

Hover with text

来源

2012-01-12 Dean Pauley

对于边界的事情，你可以试试这个，为#images添加'border：none;'。 – 2012-01-12 12:12:49

与您的主要问题不同的问题。你想归档什么包括两个不同版本的jQuery和'script.js'？ – reporter 2012-01-12 12:15:53

对不起，我不太明白。你能解释一下吗？ – 2012-01-12 12:31:41

我发现在我的编程中发生的图像越来越小，即使我已经特别调整了每个图像的完全尺寸并缩小了文件大小......然后我发现它发生在幻灯片中，如果您的实际文件名图像在格式名称（以jpeg，gif，png等结尾）之前有一个空格或一个短划线或其他奇数字符，足以创建一个看起来像图像变得越来越大和接近的错误，像相机快门般的。如果您返回并简单地重命名图像或删除空格，破折号等，然后重新加载它们，并按照您的意图转换幻灯片。

来源

2014-05-15 03:42:25 user3639167

jQuery的淡入淡出悬停4期

回答

相关问题