Измените фоновое изображение при наведении курсора мыши на div с помощью jQuery

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Настройка HTML

У меня есть настройка, как на картинке. Я хочу, чтобы пользователи наводили курсор на каждое красное поле, и когда мышь находится над каждым полем, я хочу, чтобы фон (который теперь серый) менялся на фоновое изображение. Разные картинки с разными рамками. В моем css у меня есть:

 #service {
background: grey;}

Я написал этот код jQuery:

 $service = $('#service');
$('.service-list').on('mouseover', 'div', function() {
    $service.css('background-image', 'url('   $(this).attr("data-uri")   ')');
});

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

 <img src="path/image-01.png" width="1" height="1" alt="Image 01" />

а затем выполните предварительную загрузку display none.. Проверьте, сработает ли это. пожалуйста, помогите

редактировать —- просто для ясности, я хочу изменить фон для фона служб div, а не для фона каждого красного прямоугольника

1. Было бы намного лучше, если бы вы создали jsfiddle или живую демонстрацию, на которую мы можем посмотреть?

2. почему бы просто не использовать CSS для наведения курсора? это намного проще

3. Если вы хотите использовать jQuery вместо CSS для чего-то конкретного, вы могли бы попробовать .hover(): api.jquery.com/hover

4. фон окна или всей страницы?

5. Я хочу изменить фон фона служб div, а не каждого из фона красного поля

Ответ №1:

Вы можете добиться этого с помощью функции наведения курсора jquery.

 $service = $('#service');

$('.greay-box').hover(function() {
    $service.css('background-image', 'url('   $(this).attr("data-uri")   ')');
        }, function(){

    $service.css('background-image', '');

    });

Вот пример скрипки. Надеюсь, это поможет вам.

Ответ №2:

Эй, я надеюсь, что вы ищете что-то вроде этого, попробуйте изменить изображение. использование Jquery

 var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function () {
        $('img.xyz').hover(sourceSwap, sourceSwap);
    });

     .my {
        width:100px;
        height:100px;    
        overflow:hidden;
         border: 2px solid red;
          float:left; 
          padding:2px;
          margin:2px;
        
    }
    .my img {
        min-width:100%;
        max-width:100%;
    }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>


<div class="row">

<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
</div>

  </body>
    </html>

Также можно проверить скрипку . . . ОБНОВЛЕННАЯ ССЫЛКА на ДЕМОНСТРАЦИЮ скрипки

1. просто для ясности, я хочу изменить фон фона служб div, а не каждого фона красной рамки

2. здравствуйте, проверьте обновленную скрипку, которую я использовал service_list для классов изображений 1 и 4, ни один div не покажет изображение, а 3,4 — нет