Добавить фоновое изображение фона при наведении курсора на ссылку

Question

я следующий код:

<div class="container"> 
    // some other code 
    <ul> 
     <li><a href="#about">about</a></li> 
     <li><a href="#service">service</a></li> 
     <li><a href="#contact">contact</a></li> 
    </ul> 
</div> 

В <a> ссылки оформлены в виде кнопок.
Теперь я хочу достичь, когда я нахожу ссылку <a>, я добавлю фоновое изображение в контейнер-div. Но у каждого из <li> есть свой имидж. Поэтому, когда я нахожу ссылку «about», контейнер div получает «about» -image. Когда я нахожу ссылку «сервис», контейнер div получает «сервис» -изображение.

Как я могу это достичь?

То, что я уже пробовал:
.container ul li a:hover .container{ background-image: url('path/to/image) }
.container ul li a:hover > .container{ background-image: url('path/to/image) }
.container ul li a:hover ~ .container{ background-image: url('path/to/image) }
.container ul li a:hover + .container{ background-image: url('path/to/image) }

КОГДА ЭТО НЕ ВОЗМОЖНО ТОЛЬКО С помощью CSS, Есть ли способ с JavaScript/JQuery?

Answer 1

JQuery:

$('.container > ul > li > a').each(function() { 
    $(this).hover(function() { 
     $('.container').toggleClass(this.hash.replace('#', '')); 
    }); 
}); 

CSS:

.about { background-image: url('path/to/image1') } 
.service { background-image: url('path/to/image2') } 
.contact { background-image: url('path/to/image3') } 

Answer 2

Я не думаю, что это возможно в одиночку с помощью CSS

<div class="container">// some other code 
    <ul> 
     <li> 
      <a href="#about" data-type="about">about</a> 
     </li> 
     <li> 
      <a href="#service" data-type="service">service</a> 
     </li> 
     <li> 
      <a href="#contact" data-type="contact">contact</a> 
     </li> 
    </ul> 
</div> 

затем

.container.about{ 
    background-image: url(...) 
} 

и

jQuery(function ($) { 
    $('.container li a').hover(function() { 
     $('.container').addClass($(this).data('type')) 
    }, function() { 
     $('.container').removeClass($(this).data('type')) 
    }) 
}) 

Демо: Fiddle

Answer 3

<div class="container"> 
    // some other code 
    <ul> 
     <li><a href="#about" id="1">about</a></li> 
     <li><a href="#service" id="2">service</a></li> 
     <li><a href="#contact" id="3">contact</a></li> 
    </ul> 
</div> 




$(document).ready(function() { 

    $('#1').hover(function(){ 
    $('.container').css("background","url(images/pic1.jpg)"); 
}, function() { 
    $('.container').css("background","'none'"); 
}); 
    $('#2').hover(function(){ 
    $('.container').css("background","url(images/pic2.jpg)"); 
}, function() { 
    $('.container').css("background","'none'"); 
}); 
    $('#3').hover(function(){ 
    $('.container').css("background","url(images/pic3.jpg)"); 
}, function() { 
    $('.container').css("background","'none'"); 
}); 

});