How can I change background on mouseenter?-CodePudding

I've a simple page and I would like to change the background image image using mounter enter at buttons. I got three buttons at background.

Problem is that, I want to add fadeIn/fadeOut effect, what I did(I add transition: 1.5s in CSS). But then, when I move too fast between buttons, the fadein/out effect doesn't work properly.

$(document).ready(function() {
  var svatba = $(".svatbauvod");
  var promo = $(".promouvod");
  var after = $(".afteruvod");
  var pozadi = $(".uvod-body");

  svatba.on('mouseenter', function() {
    pozadi.css('background-image', 'url(img/uvod1.jpg)');
  });

  promo.on('mouseenter', function() {
    pozadi.css('background-image', 'url(img/uvod2.jpg)');
  });

  after.on('mouseenter', function() {
    pozadi.css('background-image', 'url(img/uvod3.jpg)');
  });
});

.uvod-body {
  background-image: url("/img/uvod1.jpg");
  background-size: cover;
  height: 100vh;
  width: auto;
  outline: 3px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <main >
      <div >
          <h1><a href="#" >Svatební videa</a></h1>
          <h1><a href="#" >Promo videa</a></h1>
          <h1><a href="#" >After movie</a></h1>

      </div>
   </main>
</body>

CodePudding user response：

If you move the images to classes and use jQuery to change which of these classes is active, you can use the native CSS transitions to achieve your effect.

Here is a sample. I do not have access to the images you are referencing, so I've used colors instead. The fade effect is the same.

Notice that we are using addClass() and removeClass(). You can add or remove multiple classes at a time by specifying them in a space-delimited string.

I have applied one of the classes to the element to start. This is similar to the background-image property you had applied.

$(document).ready(function() {
  var svatba = $(".svatbauvod");
  var promo = $(".promouvod");
  var after = $(".afteruvod");
  var pozadi = $(".uvod-body");

  svatba.on('mouseenter', function() {
    pozadi.addClass('uvod1').removeClass('uvod2 uvod3');
    //.css('background-image', 'url(img/uvod1.jpg)');
  });

  promo.on('mouseenter', function() {
    pozadi.addClass('uvod2').removeClass('uvod1 uvod3');
    //.css('background-image', 'url(img/uvod2.jpg)');
  });

  after.on('mouseenter', function() {
    pozadi.addClass('uvod3').removeClass('uvod1 uvod2');
    //.css('background-image', 'url(img/uvod3.jpg)');
  });
});

.uvod-body {
  /* background-image: url("/img/uvod1.jpg"); */
  background-size: cover;
  height: 100vh;
  width: auto;
  outline: 3px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1.5s;
}

.uvod1 {
  /* background-image: url("/img/uvod1.jpg"); */
  background-color: red;
}

.uvod2 {
  /* background-image: url("/img/uvod2.jpg"); */
  background-color: green;
}

.uvod3 {
  /* background-image: url("/img/uvod3.jpg"); */
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <main >
      <div >
          <h1><a href="#" >Svatební videa</a></h1>
          <h1><a href="#" >Promo videa</a></h1>
          <h1><a href="#" >After movie</a></h1>
      </div>
   </main>
</body>

CodePudding user response：

You can alter the background directly but styling should be done with CSS for the most part - so we can trigger a class instead (or set a property that "CSS detects"). Here I use color for demonstration but also your background and then toggle the classes depending upon which you hover - the grandparent has the transition you stated and this works.

I added a set of -two classes for the :hover you see in the CSS just to show that - but that is the element not its grandparent. (no transition there but you could add it in the CSS as you do the grandparent - but that is not really your question.

Note there is a CSS :has() to address the "parent" but it is not widely supported as of this writing.

$(function() {
  let svatba = $(".svatbauvod");
  let promo = $(".promouvod");
  let after = $(".afteruvod");
  let pozadi = $(".uvod-body");

  svatba.on('mouseenter', function() {
    pozadi.addClass('svatbauvod-in')
      .removeClass('promouvod-in afteruvod-in');
  });

  promo.on('mouseenter', function() {
    pozadi.addClass('promouvod-in')
      .removeClass('svatbauvod-in afteruvod-in');
  });

  after.on('mouseenter', function() {
    pozadi.addClass('afteruvod-in')
      .removeClass('svatbauvod-in promouvod-in');
  });
});

.uvod-body,
.uvod-body-two {
  background-image: url("/img/uvod1.jpg");
  background-size: cover;
  height: 100vh;
  width: auto;
  outline: 3px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1.5s;
}

.uvod-body.svatbauvod-in,
.svatbauvod-two:hover {
  background-image: url("/img/uvod1.jpg");
  background-color: #ddffff;
}

.uvod-body.promouvod-in,
.promouvod-two:hover {
  background-image: url("/img/uvod2.jpg");
  background-color: #ffddff;
}

.uvod-body.afteruvod-in,
.afteruvod-two:hover {
  background-image: url("/img/uvod3.jpg");
  background-color: #ffffdd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <main >
    <div >
      <h1><a href="#" >Svatební videa</a></h1>
      <h1><a href="#" >Promo videa</a></h1>
      <h1><a href="#" >After movie</a></h1>
    </div>
  </main>
  <main >
    <div >
      <h1><a href="#" >Svatební videa</a></h1>
      <h1><a href="#" >Promo videa</a></h1>
      <h1><a href="#" >After movie</a></h1>
    </div>
  </main>
</body>