悬停链接时添加背景的背景图像

Question

I've the following code:

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

The <a> links are styled as buttons.
Now I want to achieve, when I hovering the <a> link, I will add a background image to the container-div. But each of the <li> 's have their own image. So when I hover the "about" link, the container div get's a "about"-image. When I hover the "service" link, the container div get's a "service"-image.

How can I achieve that?

What I already tried:
.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) }

WHEN IT IS NOT POSSIBLE WITH ONLY CSS, Is there a way with JavaScript / jQuery?

Answer 1

I don't think it is possible using css alone

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

then

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

and

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

Demo: Fiddle

Answer 2

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

 });