如何使用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標簽和一般的標題元素應該只包裝文本，但您將錨元素放在其中。 這就是當圖像出現時它移動的原因，因為它的高度正在被你的類交換改變。 看看語義。

關於您的背景圖像定位問題，它沒有顯示在瀏覽器的頂部，因為主父容器是 position: 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>