Я пытаюсь заставить фоновое изображение переключаться между другими изображениями, когда 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: (Я настроил z-index с обеих сторон от div до 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');
  });
0
Scott 28 Май 2017 в 19:53

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');
    }

Но я считаю, что было бы лучше иметь два разных элемента в целом и легко достичь этого, если ваши требования гибкие,

0
semuzaboi 28 Май 2017 в 18:20

Решение только для 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>
1
demux 28 Май 2017 в 22:11