jQuery图像悬停颜色叠加

Posted 2023-05-08

【中文标题】jQuery图像悬停颜色叠加

【英文标题】：jQuery image hover color overlay

【发布时间】：2011-03-03 03:20:47

【问题描述】：

我似乎无法在互联网上的任何地方找到任何这样的例子，但这是我要尝试做的事情......我正在尝试以最干净的方式放置它出去。

所以我有一个图片库，其中的图片大小都不同。我想让它当你将鼠标悬停在图像上时，它会变成橙色。只是一个简单的悬停效果。

我想在不使用图像交换的情况下执行此操作，否则我必须为每个单独的图库图像创建一个橙色的悬停图像，我希望它更具动态性。

我的计划只是在图像上放置一个空的 div 绝对具有背景颜色、宽度和高度 100% 和不透明度：0。然后使用 jquery，在鼠标悬停时，我会将不透明度淡化到 0.3 左右，并且鼠标移出时淡入零。

我的问题是，什么是布局 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;

【参考方案1】：

让我们从稍微简单的 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>

编辑：快速淡入，淡出：

$('#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');
);

【讨论】：

这很好用，谢谢！如何为此添加快速淡入淡出？

【参考方案2】：

这就是全部内容

<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>

它可以工作并且看起来很酷。好主意。

【参考方案3】：

您是否正在寻找这样的东西：

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>

HTML：

<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>

CSS：

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

【讨论】：

很抱歉。我已经完成了，但我昨晚忘记将其添加到帖子中。见上文。