Изменение фона главного DIV при наведении курсора на Subdiv

Question

У меня есть один контейнер с 3 подпунктов и Jquery:

$(function() { 
 
    $('.sub1').hover(function() { 
 
    $('#container').css('background-image', 'url("../img/plan.jpg")'); 
 
    }, function() { 
 
    // on mouseout, reset the background colour 
 
    $('#container').css('background-color', ''); 
 
    }); 
 
});

<div id="container"> 
 
    <div class="sub1">This is link 1</div> 
 
    <div class="sub2">This is link 2</div> 
 
    <div class="sub3">This is link 3</div> 
 
</div>

Цель состоит в том, чтобы изменить фон «контейнер» при наведении курсора «sub1», «sub2» или «sub3». Каждый sub имеет собственный фоновый образ в css. Когда мышь больше не будет витать «sub1», «sub2» или «sub3», фон вернется к белому.

Не возражайте, что theres no sub2 или sub3 пока не функционирует, я сосредотачиваюсь на них позже.

У меня есть работа над частью мыши. Фон контейнера не вернется в исходное состояние (белый).

Есть ли какой-нибудь гуру, который может мне помочь?

Заранее благодарен,

Roelof!

Answer 1

Вы устанавливаете фоновый цвет вместо фонового изображения. Я взял на себя смелость заставить его работать и на всех сумах. :)

$(function() { 
 
    $('#container').on('mouseover', '[class^="sub"]', function() { 
 
    var container = $('#container'); 
 
    switch ($(this).attr('class')) { 
 
     case 'sub1': 
 
     container.css('background-image', 'url("http://placehold.it/500x50")'); 
 
     break; 
 
     case 'sub2': 
 
     container.css('background-image', 'url("http://placehold.it/500x60")'); 
 
     break; 
 
     case 'sub3': 
 
     container.css('background-image', 'url("http://placehold.it/500x70")'); 
 
     break; 
 
     default: 
 
    } 
 
    }); 
 
    
 
    $('#container').on('mouseout', '[class^="sub"]', function() { 
 
    $('#container').css('background-image', ''); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="sub1">This is link 1</div> 
 
    <div class="sub2">This is link 2</div> 
 
    <div class="sub3">This is link 3</div> 
 
</div>

Answer 2

Он должен выглядеть, когда парят над каждым .sub вы получите красный цвет другой мудрый вы получите зеленый И тогда вы можете просто поместить изображение в его

EDITED : Добавить изображение для вас на hover вы получите изображение на мышь, вы получите изображение удалить и установить цвет

$(function() { 
 
     $('#container > div').hover(function() { 
 
     $('#container').css('background-image',     'url(http://www.placecage.com/200/300)'); 
 
     console.log("mouse over"); 
 
     }, function() { 
 
     // on mouseover, reset the background colour 
 
     $('#container').css({ 
 
      'background-color': 'green', 
 
      'background-image': 'none' 
 
     }); 
 
     console.log("mouse out"); 
 
     }); 
 
    });

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

 
    <div id="container"> 
 
     <div class="sub1">This is link 1</div> 
 
     <div class="sub2">This is link 2</div> 
 
     <div class="sub3">This is link 3</div> 
 
    </div>

Answer 3

Я думаю, что единственная ошибка в коде является то, что вы сбросить background-color вместо background-image собственности

$(function() { 
$('.sub1').hover(function() { 
    $('#container').css('background-image', 'url("../img/plan.jpg")'); 
}, function() { 
    // on mouseout, reset the background colour 
    $('#container').css('background-image', ''); // definately here is the error 
}); 
});