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>链接时，我会将一个背景图像添加到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的方法？

Answer 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'))
    })
})

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

 });

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

3 个答案: