How to display background image on link hover using js

Question

I am attempting to create image display behind text on link hover. The problems I am having is the positioning of the image - I want them to appear at the top of the browser and the second issue is the other text elements with h1 tag move when the image is being displayed

here is what I have so far https://jsfiddle.net/6sy1drLw/3/ Any suggestions would be much appreciated

JS

$('.onhover-toggle-child-class').on(
'mouseenter mouseleave',
function() {
var element = $(this);
var selector = element.data('target');
var child = element.find(selector);
var classes = element.data('toggle');


child.toggleClass(classes);
}
);

Possible duplicate of [Change background image on link hover](https://stackoverflow.com/questions/18858714/change-background-image-on-link-hover) — Dan O, Jan 23 '19 at 02:11
It seems like you could probably solve this with css and no javascript — wmp224, Jan 23 '19 at 02:17

James Garcia · Answer 1 · 2019-01-23T10:13:13.653

Looks like the HTML you are defining in your JSFiddle example is not well constructed.

The h1 tag and in general heading elements should wrap only text, but you are putting anchor elements inside it. That is the reason why it moves when the image appears, because it's height is being altered by your classes swapping. Have a look at Semantics.

In regards to your issue with the background image positioning, it is not being displayed at the top of the browser because the main parent container is position: relative, so the image is absolute in regards to the parent position and not the window.

Consider refactor your code taking into account the points above and share it so we can figure out this better.

--- ANSWER UPDATE ---

Hey @Sasha.Burger,

Take a look at this example, I hope it can help:

$('.hoverable__text').on('mouseenter mouseleave', function(event) {
 var $hoverableContainer = $('#hoverable-background');
 var toggleClass = event.target.getAttribute('toggle');
 $hoverableContainer.toggleClass(toggleClass);
});

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: arial;
}

.hoverable {
  height: 100vh;
  padding: 20px;
  width: 100vw;
}

.hoverable-option-1 {
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR24qtJ7yiZutbUs9MtLQUmWN9jF6j2fLQTov8_qRCgRMWRPRjm");
  background-repeat: no-repeat;
}

.hoverable-option-2 {
  background: url("https://f4.bcbits.com/img/0013854064_10.jpg");
  background-repeat: no-repeat;
}

.hoverable-option-3 {
  background: url("https://f4.bcbits.com/img/0013854064_10.jpg");
  background-repeat: no-repeat;
}

.hoverable__container {
  display: block;
  margin: 0 auto;
  width: 80%;
}

.hoverable__text {
  cursor: pointer;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoverable" id="hoverable-background">
        <div class="hoverable__container">
          <p>
            Lorem ipsum dolor spansit <span toggle="hoverable-option-1" class="hoverable__text">SHOW IMAGE</span> amet, consectetur adipisicing elit. Quasi saepe voluptatem
            quam est <span toggle="hoverable-option-2" class="hoverable__text">SHOW IMAGE</span> dolores quis quaerat ex, aspernatur aperiam voluptas voluptatum eos corrupti
            deleniti ad obcaecati? Doloribus <span toggle="hoverable-option-3" class="hoverable__text">SHOW IMAGE</span> cupiditate velit ratione.
          </p>
        </div>
      </div>

Thank you for response, I will look into the points you made! — , Jan 23 '19 at 02:05
What I am stuck on is how can I have the anchor elements outside of the heading elements while still having all the text within one paragraph? — , Jan 23 '19 at 02:36
Hi @Sasha.Burger I updated my answer including an snippet that would help you as reference. — James Garcia, Jan 23 '19 at 10:14

How to display background image on link hover using js

1 Answers1