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

Question

需要您的帮助...已阅读所有解决方案，但没有适合我的需求。 我使用汉堡菜单，当单击菜单并且主体被其他背景全显示器尺寸关闭时，还有其上的所有链接。

我想当鼠标悬停在链接上时更改背景，并且每个链接都有不同的背景。 例如:当鼠标悬停在链接“About”上时，背景会更改为 boy.jpg；当鼠标悬停在菜单“服务”上时，背景会更改为 man.jpg；当鼠标不在链接上时，背景会更改为 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")');
});