如何使用js在链接悬停时显示背景图像

Question

我正在尝试在链接悬停时在文本后面创建图像显示。 我遇到的问题是图像的定位 - 我希望它们出现在浏览器的顶部，第二个问题是显示图像时带有 h1 标签的其他文本元素移动

这是我目前所拥有的https://jsfiddle.net/6sy1drLw/3/ 任何建议将不胜感激

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

看起来您在 JSFiddle 示例中定义的 HTML 构造不佳。

h1 标签和一般的heading elements 应该只包裹文本，但您将锚元素放在其中。这就是图像出现时它移动的原因，因为它的高度正在通过你的类交换而改变。看看Semantics。

关于你的背景图片定位问题，它没有显示在浏览器的顶部，因为主父容器是位置：relative，所以图片是绝对的父位置而不是窗口。

考虑到上述几点，考虑重构您的代码并分享它，以便我们更好地解决这个问题。

--- 答案更新---

嘿@Sasha.Burger，

看看这个例子，希望能有所帮助：

$('.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>