更改鏈接鼠標懸停時的正文背景

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