2012-06-03 168 views
0

我想讓jQuery懸停圖像,但代碼無法正常工作,它沒有顯示任何東西。 我貼我的代碼解釋,我希望有人能幫助我這個...jquery圖像懸停卡住

gallery.html

<html> 
<head> 
<title>Test</title> 
<link rel="stylesheet" href="style.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="js/default.js"></script> 
</head> 
<body> 
<div class="gallery"> 
<ul class="items"> 
    <ul> 
    <li><span class="img_frame"><a href="img/s6300159.jpg"><img src="img/test1.jpg" /></a></span><div class="img_desc"><span>22</span></div></li> 
    <li><span class="img_frame"><a href="img/s6300159.jpg"><img src="img/test1.jpg" /></a></span><div class="img_desc"><span>23</span></div></li> 
    <li><span class="img_frame"><a href="img/s6300159.jpg"><img src="img/test1.jpg" /></a></span><div class="img_desc"><span>24</span></div></li> 
    </ul> 
</ul> 
</div> 
</body> 
</html> 

的style.css

.gallery {overflow:hidden; width:1000px;} 
.gallery .items { margin-bottom:50px; height:320px; } 
.gallery .items li { position:relative; float:left; width:290px; height:180px; margin-right:38px; margin-bottom: 30px; } 
.gallery .items li img { width:277px; height:165px; } 

.img_desc { 
position: absolute; 
    display: block; 
    top: 10px; 
text-shadow: 1px 1px 0 #ffffff; 
color: #262626; 
background: url(img/benefits_on.png) repeat; 
width: 36px; 
right: 5px; 
text-align: center; 
    } 


    .img_frame { 
    margin-top:3px; 
    padding:1px; 
    display:inline-block; 
    line-height:0px; 
    background:#fff; 
    border:1px solid #ccc; 
     } 

    .img_frame img { 
    padding:1px; 
    border:4px solid #f2f1f0; 
    } 
    .img_frame a { display:block; } 

    .hover_image { background:url("img/preview_image.png") center center no-repeat; } 

默認。 js

<!-- Image hover effect --> 
function image_hover(frame){ 
var link_content = jQuery(frame).find('a[href^=http], a[href*=www], a[href=#], a[href$=html], a[href$=php], a[href$=asp], a[href$=htm], a[href$=shtml], a[href$=aspx]'); 
var image_content = jQuery(frame).find('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]'); 
var video_content = jQuery(frame).find('a[href*=vimeo], a[href*=youtube], a[href*=swf], a[href*=flv], a[href*=avi], a[href*=mov], a[href*=mpg]'); 

link_content.addClass("hover_link"); 
image_content.removeClass("hover_link").addClass("hover_image"); 
video_content.removeClass("hover_link").addClass("hover_video"); 

jQuery(frame).find("a > img").hover(
    function() { 
     if(!jQuery(this).parent().hasClass("no_hover")){ 
      jQuery(this).stop().animate({"opacity": ".6"}, "400"); 
     } 
    }, 
    function() { 
     jQuery(this).stop().animate({"opacity": "1"}, "400"); 
}); 

jQuery(frame).children("a.no_hover").removeClass("hover_image"); 
return false; 
} 

jQuery(function(){ 

image_hover('.img_frame'); 
}); 

........................

+5

您是否可以縮小問題範圍並編輯帖子以顯示較少量的代碼? –

回答

0

你想達到什麼樣的懸停效果?在我的情況下,它向我展示了一些發光的邊框或類似的東西,因爲它降低了不透明度,背景正在拉起。如果這是你想要的,你可能會犯錯類.hover_image類的圖像位置。嘗試給出該​​類的背景顏色,如

.hover_image { background:#ff0000 url("img/preview_image.png") center center no-repeat; } 

您可能會得到正是我所得到的效果。

+0

我在default.js(求助) –

+0

裏面的錯誤你能介紹一下你正在尋找什麼,你是如何解決它的? – maksbd19