Question

需要你的帮助......已经阅读了所有解决方案，但不符合我的需求。我使用汉堡菜单，当菜单点击并且身体被其他背景完整显示器大小关闭时，它上面的所有链接也都是。

当鼠标悬停在链接上并且每个链接具有不同的背景时，我想更改背景。 例如：当鼠标悬停在链接上然后BG更改为boy.jpg，当鼠标转到菜单服务然后BG更改为man.jpg并且当鼠标没有超过链接时BG返回默认BG图像。

这里是菜单代码

body:after {
  background-image:url(../images/AboutEMC.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  content:'';
  height:100%;
  left:0;
  opacity:0;
  padding:0;
  top:0;
  visibility:hidden;
  -webkit-transition:all .4s ease;
  transition:all .4s ease;
  width:100%
}

<div class="b-nav">
  <li>
    <a class="b-link" href="about.html">About EMC</a>
  </li>

  <li>
    <a class="b-link" href="service.html">Service</a>
  </li>

  <li>
    <a class="b-link" href="case1.html">Portfolio</a>
  </li>

  <li>
    <a class="b-link" href="team.html">Hire Us</a>
  </li>

  <li>
    <a class="b-link" href="news.html">News</a>
  </li>
</div>

Answer 1

你试试这个..

$('a.class').on('mousein', function(){
   $('#portfolio').css('background-image', 'url("other.jpg")');
});
$('a.class').on('mouseout', function(){, function(){
  $('#portfolio').css('background-image', 'url("woman.jpg")');
});

Answer 2

我会添加您想要切换到html作为属性的文件名...

<body data-img="default.jpg">

  <li>
    <a class="b-link" data-img="boy.jpg" href="about.html">About EMC</a>
  </li>

  <li>
    <a class="b-link" data-img="girl.jpg" href="about.html">About EMC</a>
  </li>

</body>

然后添加你的javascript来切换它们......

的jQuery

$('a.b-link').on('mousein', function(){
   var newUrl = '../img/' + $(this).data('data-img'),
   $('body').css('background-image', 'url(newUrl)');
});

$('a.b-link').on('mouseout', function(){, function(){
   var oldUrl = '../img/' + $('body').data('data-img'),
   $('body').css('background-image', 'url(oldUrl)');
});

Answer 3

尝试使用data属性机制。在您的情况下，因为您需要在每个链接上显示不同的图像，那么您需要定义要显示的图像，

<body data-img="default.jpg">
  <li>
    <a class="b-link" href="about.html" data-image="about.jpg">About EMC</a>
  </li>

  <li>
    <a class="b-link" href="service.html" data-image="service.jpg">Service</a>
  </li>

  <li>
    <a class="b-link" href="case1.html" data-image="portfolio.jpg">Portfolio</a>
  </li>

  <li>
    <a class="b-link" href="team.html" data-image="hire.jpg">Hire Us</a>
  </li>

  <li>
    <a class="b-link" href="news.html" data-image="news.jpg">News</a>
  </li>

</body>

在jQuery中这样做，

$('a.b-link').on('mousein', function(){
   var img = $(this).data("image");
   $('body').css('background-image', 'url('+ img +')');
});

$('a.b-link').on('mouseout', function(){, function(){
  $('body').css('background-image', 'url("default.jpg")');
});

更改链接鼠标悬停时的正文背景

3 个答案: