Question

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

$(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>

额外奖励：有人可以向我解释为什么当鼠标留下链接给身体提供原始背景图像时，我必须使用第二个功能？我认为.hover()方法会自动在目标元素上进行切换...

.hover（）方法为mouseenter和mouseleave事件绑定处理程序。您可以使用它在鼠标位于元素中时简单地将行为应用于元素。

非常感谢您的帮助！

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("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之后，我创建了一个想法。这可能对你有所帮助。只需复制并试一试。

<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 opacity属性设置为0.这样，您可以轻松更改图像之间的不透明度属性，并获得平滑的淡入淡出效果。

jquery更新div背景

3 个答案: