javascript - 脚本没有创建跨度

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>");