Цветовое наложение при наведении на изображение jQuery

Question

Кажется, я не могу найти никаких примеров того, что это было сделано ранее в Интернете, но вот что я попытаюсь сделать ... Я пытаюсь найти самый чистый из возможных способовout.

Итак, у меня есть галерея изображений, где все изображения разных размеров.Я хочу сделать так, чтобы при наведении курсора мыши изображение получилось оранжевым.Просто простой эффект наведения.

Я хочу сделать это без использования обмена изображениями, в противном случае мне пришлось бы создавать оранжевое изображение наведения для каждого отдельного изображения галереи, я хотел бы, чтобы это былонемного более динамично.

Мой план состоит в том, чтобы просто разместить пустой 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;
}

Answer 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');
});

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

Работает и выглядит круто. Хорошая идея.

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