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

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

您应该重命名您的类名（彼此不同）并尝试使用不同的图像。

<script> $(document).ready(function(){ $(".b-link").mouseover(function(){ $("body").css("background-image", "url(http://wikidpad.sourceforge.net/help/html/demo/files/demo/bubbles64.png)"); }); }); </script>

Answer 4

尝试使用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")');
});

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

问题描述

4 个解决方案

解决方案1
0 2016-12-05 05:21:45

解决方案2
0 2016-12-05 05:41:22

解决方案3
0 2016-12-05 05:42:31

解决方案4
0 2016-12-05 05:50:00

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

问题描述

4 个解决方案

解决方案1 0 2016-12-05 05:21:45

解决方案2 0 2016-12-05 05:41:22

解决方案3 0 2016-12-05 05:42:31

解决方案4 0 2016-12-05 05:50:00

解决方案1
0 2016-12-05 05:21:45

解决方案2
0 2016-12-05 05:41:22

解决方案3
0 2016-12-05 05:42:31

解决方案4
0 2016-12-05 05:50:00