1

我有以下代码：

<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>链接时，我会在 container-div 中添加一个背景图像。但每个人<li>都有自己的形象。因此，当我将鼠标悬停在“关于”链接时，容器 div 会得到一个“关于”图像。当我悬停“服务”链接时，容器 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 有办法吗？

4

3 回答 3

1

我认为单独使用 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'))
    })
})

演示：小提琴

于 2013-10-08T07:00:58.837 回答
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') }
于 2013-10-08T07:08:26.937 回答
0 
<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'");  
});

 });
于 2013-10-08T07:02:42.000 回答