尝试淡入.css（“背景图片”，__）

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 ：（我已将divs两侧的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');
    }

但是我认为，如果您的要求很灵活，最好同时拥有两个不同的元素并轻松实现这一目标，