悬停链接时添加背景图像

Add background-image of background when hovering a link

本文关键字：背景 图像 添加 链接 悬停      更新时间：2023-09-26

我有以下代码：

<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>都有自己的形象。因此，当我将鼠标悬停在"关于"链接上时，容器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有没有办法？

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

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

演示：小提琴

<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'");  
});
 });
相关文章：