如何使用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);
}
);

Answer 1

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>