腳本也沒有創造跨度

Question

這是我使用的圖像下創建跨腳本在懸停顯示背景圖片

$(".gallery li a.image, .portfolio li a.image").append('<span class="image_hover"></span>'); //add span to images 
     $(".gallery li a.video, .portfolio li a.video").append('<span class="video_hover"></span>'); //add span to videos 

     $('.gallery li a span').css('opacity', '0').css('display', 'block') //span opacity = 0 

     // show/hide span on hover 
     $(".gallery li a, .portfolio li a").hover(
      function() { 
       $(this).find('.image_hover, .video_hover').stop().fadeTo('slow', .7); }, 
      function() { 
        $('.image_hover, .video_hover').stop().fadeOut('slow', 0); 
     }); 

這是CSS代碼：

#gallery_prettyphoto.portfolio 
{padding: 0 0 20px 0; 
overflow: hidden; 
} 

#gallery_prettyphoto.portfolio ul li 
{ 
display: inline-block; 
height: 400px; 
margin-bottom:35px; 

} 


#gallery_prettyphoto.portfolio ul li a img 
{border: none; margin-top: 30px;} 
/*#gallery_prettyphoto.portfolio:hover ul li a img {width: 120%;}*/ 

#gallery_prettyphoto.portfolio ul li h3 a 
{text-decoration: none; text-align: center;} 

#gallery_prettyphoto.portfolio ul li p 
{margin: 10px 0 15px 0;} 

#gallery_prettyphoto.portfolio ul li a.more-link 
{-moz-border-radius: 3px; /* FF1-3.6 */ 
    -webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android <1.6 */ 
    border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ 
border: 1px solid #2C2C2C; 
background: #111111; 
text-align: center; 
padding: 3px 10px; 
width: 80px; 
display: block; 
color: white; 
text-decoration: none;} 

#gallery_prettyphoto.portfolio ul li a.more-link:hover 
{background: #222222;} 

#gallery_prettyphoto.portfolio a span 
{ 
z-index: 2000; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
display: block; 
cursor: pointer; 
} 

.portfolio .gallery_2columns a 
{position: relative; 
display: block;} 

.portfolio .gallery_3columns a 
{position: relative; 
display: block;} 

.portfolio .gallery_2columns a span.image_hover 
{background: black url(images/gallery_hover/hover_image_big.png) no-repeat center center; 
} 


.portfolio .gallery_2columns a span.video_hover 
{background: black url(images/gallery_hover/hover_video_big.png) no-repeat center center; 
} 

.portfolio .gallery_3columns a span.image_hover 
{background: black url(images/gallery_hover/hover_image_medium.png) no-repeat center center; 
} 

.portfolio .gallery_3columns a span.video_hover 
{background: black url(images/gallery_hover/hover_video_medium.png) no-repeat center center; 
} 

如果有是沒有解決辦法，你能指導我創造類似的懸停效果，如放大圖像或不透明度改變。

Answer 1

試試這個

改變這一點：$(".gallery li a.image, .portfolio li a.image").append('<span class="image_hover"></span>');

這樣：$(".gallery li a.image, .portfolio li a.image").append("<span class='image_hover'></span>");