Jquery图像悬停卡住了

Jquery Image Hover stuck

本文关键字：悬停 图像 Jquery      更新时间：2023-09-26

我正在尝试使jQuery悬停图像，但代码无法正常工作，它没有显示任何内容。我粘贴我的代码来解释，我希望有人可以帮助我解决这个问题......

图库.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>

风格.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');
 });
............

............。

你想要实现什么样的悬停效果？就我而言，它向我展示了一些发光的边框或类似的东西，因为它降低了不透明度，背景正在拉起。如果这是您想要的，您可能错误地输入了.hover_image类的图像位置。尝试为该类提供背景颜色，例如

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

你可能会得到我所得到的效果。

相关文章：