jquery 更新 div 背景

Question

当我将 link 悬停在 data-* 属性上时，我正在尝试更新页面正文元素上的背景图像。它就像一个魅力，但我找不到一种方法来在 link 悬停时在图像之间创建平滑的淡入淡出。这是我的代码：

$(document).ready(function(){
 $('.link').hover(
  function() {
   var bg = $(this).data('fond');

   // alert(bg);

   $('body').css("backgroundImage", 'url(' + bg + ')');
  },
  function () {
             $('body').css("backgroundImage", 'url(http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg)');
        }
 );
});

body {
 margin:0;
 background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 transition: all 1s;
}

header {
 width: 50%;
 margin: 50px auto;
}

h1 {
 text-align: center;
}

nav {
 position: absolute;
 width: 50%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 text-align: center;
}

nav ul {
 padding: 50px;
 background-color: rgba(0, 0, 0, 0.95);
}

nav ul li {
 display: inline-block;
 padding: 0 20px;
}

nav ul li a {
 color: white;
 text-decoration: none;
}

<header>
      <h1>Hover a link, bro</h1>
    </header>
        <!-- Main -->
        <main> 
          <nav class="main-nav">
            <ul>
              <li data-fond ="img/belharra.jpg" class="link"><a href="#">Belharra</a></li>
              <li data-fond ="img/jaws.jpg" class="link"><a href="#">Jaws</a></li>
              <li data-fond ="img/mavericks.jpg" class="link"><a href="#">Mavericks</a></li>
              <li data-fond ="img/nazare.jpg" class="link"><a href="#">Nazare</a></li>
              <li data-fond ="img/teahupoo.jpg" class="link"><a href="#">Teahuppo</a></li>
            </ul>
          </nav>
        </main>

奖金：有人可以向我解释为什么当鼠标离开 link 时我必须使用第二个函数来为 body 提供原始背景图像吗？我以为 .hover() 方法会自动切换目标元素...

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

非常感谢您的帮助！

Answer 1

body {
    margin:0;
    background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 1s;
}

请更改您的 url link url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"); 这是不正确的

Answer 2

你可以像这样试试你的jquery。

$('body').fadeOut(1000).css("your code").fadeIn(1000);

在 html 之后，我创建了一个 idea.think 这可能有助于 you.just 复制并尝试。

<html>
<head>
<title>Welcome !</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
 .myimage{
    width:500px;
    height: 500px;
    overflow: hidden;
 }

 .myimage img{
    width: 100%;
    height: 100%;

 }


</style>


 <body>

  <div class="myimage">
    <img id="one" src="http://www.estero.co.nz/new/wp-content/uploads/2014/03/45901_new-zealand.jpg"/>
    <img id="two" src="http://www.timeforkids.com/files/styles/tfk_rect_large/public/2011-07/nz_ss5.jpg?itok=0m-TtEYy"/>
  </div>

<script type="text/javascript">
 $(document).ready(function(){
    $("#one").mouseenter(function(){
        $(this).fadeOut(1000);
    });
 });
</script>

 </body>
</html>

Answer 3

我不认为这可以用平滑的淡入淡出效果来完成。
实现此目的的更好方法是将所有图像放入 html 中的 div 容器中。您所有的图像都需要 css 不透明度属性为 0。这样，您可以轻松更改图像之间的不透明度属性并获得平滑的淡入淡出效果。

jquery 更新 div 背景

jquery update div background

javascript

css

jquery

background-image

hover