试图淡入 .css ('background-image", __)

Question

我正在尝试让背景图片在悬停 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：（我已经将 div 两侧的 z-index 分别调整为 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');
  });

Answer 1

一个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>

Answer 2

一种解决方案是在 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 ('background-image", __)

Trying to fadeIn .css ('background-image", __)

javascript

jquery

background-image

fadein

一个CSS唯一的解决方案：

如果一定要用jQuery: