试图淡入淡出.css("背景图像"，__)

当div 悬停在上面时，我正在尝试获取背景图像以在其他图像之间交换。我需要更改什么才能使图像彼此之间淡入淡出？代码如下所示：

  $('#mainUK').mouseenter(function(){
      $('.splash').css("background-image","url(Assets/Images/Splash/UK.jpg)");
  });
  $('#mainJapan').mouseenter(function(){
      $('.splash').css("background-image","url(Assets/Images/Splash/Japan.jpg)");
  });
etc..

.CSS：

 .splash { 
      background-image: url(Assets/Images/Splash/UK.jpg);
      background-repeat:no-repeat;
      background-position:center center; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width:100%;
      height:100%;
      position:fixed;
    }

.html：

<div class="splash_bg">
    <div class="splash">
      <div class="back_arrow"><h3>&larr;</h3></div>
      <div class="main_nav">
          <ul>
            <li class="main_headings"><div id="mainUK"><h3>The UK</h3></div></li>
            <li class="main_headings_sub"><a href="/England"><div id="mainEngland"><h3>England</h3></div></a></li>
            <li class="main_headings_sub"><a href="/Scotland"><div id="mainScotland"><h3>Scotland</h3></div></a></li>
            <li class="main_headings_sub"><a href="/Wales"><div id="mainWales"><h3>Wales</h3><div></a></li>
            <li class="main_headings"><a href="/Japan"><div id="mainJapan"><h3>Japan</h3></div></a></li>
            <li class="main_headings"><a href="/China"><div id="mainChina"><h3>China</h3></div></a></li>
            <li class="main_headings"><a href="/HK"><div id="mainHK"><h3>Hong Kong</h3><div></a></li>
            <li class="main_headings"><a href="/Malaysia"><div id="mainMalaysia"><h3>Malaysia</h3><div></a></li>
          </ul>
      </div>
    </div>
  </div>

编辑：

所以我解决了它。感谢@demux/@luciferous，因为你为我指明了正确的方向。如果有更好的方法，请随时告诉我。再次感谢。

.html：

<div class="splash">
    <div class="splash_UK"></div>
    <div class="splash_Japan"></div>
    <div class="splash_China"></div>
    <div class="splash_HK"></div>
    <div class="splash_Malaysia"></div>
      <div class="back_arrow"><h3>&larr;</h3></div>
      <div class="main_nav">
          <ul>
            <li class="main_headings"><div id="mainUK"><h3>The UK</h3></div></li>
            <li class="main_headings_sub"><a href="/England"><div id="mainEngland"><h3>England</h3></div></a></li>
            <li class="main_headings_sub"><a href="/Scotland"><div id="mainScotland"><h3>Scotland</h3></div></a></li>
            <li class="main_headings_sub"><a href="/Wales"><div id="mainWales"><h3>Wales</h3><div></a></li>
            <li class="main_headings"><a href="/Japan"><div id="mainJapan"><h3>Japan</h3></div></a></li>
            <li class="main_headings"><a href="/China"><div id="mainChina"><h3>China</h3></div></a></li>
            <li class="main_headings"><a href="/HK"><div id="mainHK"><h3>Hong Kong</h3><div></a></li>
            <li class="main_headings"><a href="/Malaysia"><div id="mainMalaysia"><h3>Malaysia</h3><div></a></li>
          </ul>
      </div>
  </div>

CSS：(我已经将divs两侧的z索引分别调整为1和3。

.splash_UK, .splash_Japan, .splash_China, .splash_HK, .splash_Malaysia{
  background-repeat:no-repeat;
  background-position:center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  height:100%;
  position:fixed;
  opacity:0;
  z-index:2;
  -webkit-transition: opacity 200ms linear;
  -moz-transition: opacity 200ms linear;
  -o-transition: opacity 200ms linear;
  -ms-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
.splash_UK { 
  background-image: url(Assets/Images/Splash/UK.jpg);
}
.splash_Japan { 
  background-image: url(Assets/Images/Splash/Japan.jpg);
}
.splash_China { 
  background-image: url(Assets/Images/Splash/China.jpg);
}
.splash_HK { 
  background-image: url(Assets/Images/Splash/HK.jpg);
}
.splash_Malaysia { 
  background-image: url(Assets/Images/Splash/Malaysia.jpg);
}

.JS：

 $('#mainJapan').mouseenter(function() {
    $('.splash_Japan').css('opacity', '1');
    $('.splash_UK,.splash_China,.splash_HK,.splash_Malaysia').css('opacity','0');
  });
  $('#mainUK').mouseenter(function() {
    $('.splash_UK').css('opacity', '1');
    $('.splash_Japan,.splash_China,.splash_HK,.splash_Malaysia').css('opacity','0');
  });
  $('#mainChina').mouseenter(function() {
    $('.splash_China').css('opacity', '1');
    $('.splash_Japan,.splash_UK,.splash_HK,.splash_Malaysia').css('opacity','0');
  });
  $('#mainHK').mouseenter(function() {
    $('.splash_HK').css('opacity', '1');
    $('.splash_Japan,.splash_China,.splash_UK,.splash_Malaysia').css('opacity','0');
  });
  $('#mainMalaysia').mouseenter(function() {
    $('.splash_Malaysia').css('opacity', '1');
    $('.splash_Japan,.splash_China,.splash_HK,.splash_UK').css('opacity','0');
  });

一个仅限CSS的解决方案：

.splash {
  font-family: sans-serif, verdana;
  position: relative;
  
  width: 200px;
  height: 200px;
}
.splash-item-container {
  padding: 0;
}
.splash-item {
  margin: 2px 0;
  display: block;
  list-style-type: none;
  background-color: rgba(150, 150, 150, 0.2);
  line-height: 1.5em;
}
.splash-item a {
  display: block;
  color: black;
  text-decoration: none;
}
.splash-item:before {
  display: block;
  content: '';
  transition: background-color 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  z-index: -1;
}
.splash-item-red:hover:before {
  background-color: #ffdddd;
}
.splash-item-green:hover:before {
  background-color: #ddffdd;
}
.splash-item-blue:hover:before {
  background-color: #ddddff;
}

<div class="splash">
  <ul class="splash-item-container">
    <li class="splash-item splash-item-red"><a href="#">Red</a></li>
    <li class="splash-item splash-item-green"><a href="#">Green</a></li>
    <li class="splash-item splash-item-blue"><a href="#">Blue</a></li>
  </ul>
</div>

如果必须使用 jQuery：

$(function() {
  $('.main-nav li').hover(function() {
    $('.splash').removeClass('cats-bg sports-bg').addClass($(this).data('class'));
  });
});

.splash {
  transition: background-image 1s;
}
.splash.cats-bg {
  background-image: url(http://lorempixel.com/400/200/cats/);
}
.splash.sports-bg {
  background-image: url(http://lorempixel.com/400/200/sports/);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="splash">
  <h3 class="black-arrow">&larr;</h3>
  <ul class="main-nav">
    <li data-class="cats-bg">Cats</li>
    <li data-class="sports-bg">Sports</li>
  </ul>
</div>

一种解决方案是在 background-image 属性中使用多个值，并在mouseenter和mouseleave事件上切换它们。

$(document).ready(function() {
    var tar = document.getElementById('target');  
    var bgimage = $(tar).css('background-image');
    var bgimagearr = bgimage.split(',')
    $(tar).on('mouseenter', function() {
        $(this).css('background-image', bgimagearr[0])
    });
    $(tar).on('mouseleave', function() {
        $(this).css('background-image', bgimagearr[1])
    });
})

CSS 会像

  #target{
        width:500px;
        height: 500px;
        background-image:url('./images/one.jpeg'),url('./images/two.jpeg');
    }

但我认为最好有两个不同的元素并轻松实现，如果你的要求是灵活的，

一个仅限CSS的解决方案：

如果必须使用 jQuery：

相关内容

最新更新

热门标签：