Javascript jQuery图像悬停颜色覆盖

我以前在互联网上找不到任何这样的例子，但下面是我要尝试做的……我试图用最干净的方式来展示这一点

所以我有一个图像库，里面的图像大小都不一样。我想让它这样当你把鼠标移到图像上时，它会变成橙色。只是一个简单的悬停效果

我想在不使用图像交换的情况下实现这一点，否则我必须为每个画廊图像创建一个橙色的悬停图像，我希望它更具动态性

我的计划是在图像上放置一个空div，背景颜色、宽度和高度为100%，不透明度为0。然后使用jquery，在mouseover上，我将不透明度衰减到0.3左右，在mouseout上衰减回零

我的问题是，为了高效、干净地完成这项工作，布局html和css的最佳方式是什么

以下是一个简短但不完整的设置：

<li>
  <a href="#">
    <div class="hover">&nbsp;</div>
    <img src="images/galerry_image.png" />
  </a>
</li>

.hover {
width: 100%;
height: 100%;
background: orange;
opacity: 0;
}

.悬停{
宽度：100%；
身高：100%；
背景：橙色；
不透明度：0；
}

您正在寻找这样的产品吗：

jQuery:

<script type="text/javascript">
  $(document).ready(function(){
    $("#images span > img").hover(function(){
      $(this).fadeTo("fast",0.3);
    },function(){
      $(this).fadeTo("fast",1.0);
    });
  });
</script>

<div id="images">
  <span><img src="image1.jpg" /></span>
  <span><img src="image2.jpg" /></span>
  <span><img src="image3.jpg" /></span>
  <span><img src="image4.jpg" /></span>
  <span><img src="image5.jpg" /></span>
  <span><img src="image6.jpg" /></span>
  <span><img src="image7.jpg" /></span>
</div>

<style type="text/css">
  #images span {
    display: inline-block;
    background-color: orange;
  }
</style>

$（文档）.ready（函数（）{
$（“#图像span>img”）.hover（函数（）{
美元（此）.fadeTo（“快速”，0.3）；
}，函数（）{
美元（此）.fadeTo（“快速”，1.0）；
});
});

HTML:

<script type="text/javascript">
  $(document).ready(function(){
    $("#images span > img").hover(function(){
      $(this).fadeTo("fast",0.3);
    },function(){
      $(this).fadeTo("fast",1.0);
    });
  });
</script>

<div id="images">
  <span><img src="image1.jpg" /></span>
  <span><img src="image2.jpg" /></span>
  <span><img src="image3.jpg" /></span>
  <span><img src="image4.jpg" /></span>
  <span><img src="image5.jpg" /></span>
  <span><img src="image6.jpg" /></span>
  <span><img src="image7.jpg" /></span>
</div>

<style type="text/css">
  #images span {
    display: inline-block;
    background-color: orange;
  }
</style>

CSS:

<script type="text/javascript">
  $(document).ready(function(){
    $("#images span > img").hover(function(){
      $(this).fadeTo("fast",0.3);
    },function(){
      $(this).fadeTo("fast",1.0);
    });
  });
</script>

<div id="images">
  <span><img src="image1.jpg" /></span>
  <span><img src="image2.jpg" /></span>
  <span><img src="image3.jpg" /></span>
  <span><img src="image4.jpg" /></span>
  <span><img src="image5.jpg" /></span>
  <span><img src="image6.jpg" /></span>
  <span><img src="image7.jpg" /></span>
</div>

<style type="text/css">
  #images span {
    display: inline-block;
    background-color: orange;
  }
</style>

#图像跨度{
显示：内联块；
背景颜色：橙色；
}

让我们从稍微简单的HTML开始：

<ul id="special">
    <li><a href="#"><img src="opensrs-2.png" /></a></li>
    <li><a href="#"><img src="opensrs-1.png" /></a></li>
</ul>

以下是我的解决方案：

<style type="text/css">
#special a img { border: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {

    $('#special a').bind('mouseover', function(){
        $(this).parent('li').css({position:'relative'});
        var img = $(this).children('img');
        $('<div />').text(' ').css({
            'height': img.height(),
            'width': img.width(),
            'background-color': 'orange',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.5
        }).bind('mouseout', function(){
            $(this).remove();
        }).insertAfter(this);
    });

});
</script>

#特殊img{边界：无；}
$（文档）.ready（函数（）{
$（'#特殊a'）.bind（'mouseover'，function（）{
$（this.parent（'li'）.css（{position:'relative'}）；
var img=$（this.children（'img'）；
$（''）.text（''）.css({
“高度”：img.height（），
“宽度”：img.width（），
“背景色”：“橙色”，
'位置'：'绝对'，
“顶部”：0，
“左”：0，
“不透明度”：0.5
}).bind（'mouseout'，function（）{
$（this.remove（）；
}).在（本）之后插入；
});
});

编辑：快速淡入淡出：

$('#special a').bind('mouseover', function(){
    $(this).parent('li').css({position:'relative'});
    var img = $(this).children('img');
    $('<div />').text(' ').css({
        'height': img.height(),
        'width': img.width(),
        'background-color': 'orange',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0.0
    }).bind('mouseout', function(){
        $(this).fadeOut('fast', function(){
            $(this).remove();
        });
    }).insertAfter(this).animate({
        'opacity': 0.5
    }, 'fast');
});

$（'#特殊a'）.bind（'mouseover'，function（）{
$（this.parent（'li'）.css（{position:'relative'}）；
var img=$（this.children（'img'）；
$（''）.text（''）.css({
“高度”：img.height（），
“宽度”：img.width（），
“背景色”：“橙色”，
'位置'：'绝对'，
“顶部”：0，
“左”：0，
“不透明度”：0.0
}).bind（'mouseout'，function（）{
$（this.fadeOut（'fast'，function（））{
$（this.remove（）；
});
}).insertAfter（这个）。设置动画({
“不透明度”：0.5
}“快”）；
});

全部内容如下

<script type="text/javascript">
$(function(){
        $("img").hover(function(){
                            $(this).fadeTo("slow",0);   
                            },
                            function(){
                            $(this).fadeTo("slow",1);       
                            });
});
</script>
<style type="text/css">
#lookhere{
    background-color:orange;
    width:auto;
}
</style>
Heres the html
<div id="lookhere"><img href="you know what goes here"></div>

$（函数（）{
$（“img”）.hover（函数（）{
$（这个）.fadeTo（“慢”，0）；
},
函数（）{
美元（这一点）。法代托（“慢”，1）；
});
});
#看这里{
背景颜色：橙色；
宽度：自动；
}
这是html

---

它很管用，看起来很酷。好主意。

这很有效，谢谢！我该如何添加快速淡入淡出功能呢？很抱歉。我已经完成了，但昨晚我忘了把它添加到帖子里。见上文。