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期

回答

相關問題