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。

关于您的背景图片定位问题，由于主父容器位于以下位置，因此该图片未显示在浏览器顶部：相对，因此该图片对于父位置而不是窗口。

考虑到以上几点，重构代码并进行共享，以便我们更好地解决。

---答案更新---

嘿@ Sasha.Burger，

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

<img src="images/loading3.gif" id="loading-gif">

<script>
$('#loading-gif').hide();
//    $('#task_start_butt').click(function()
$(document).ready(function () {
    $('#loading-gif').show();
    $.ajax({url: "https://aajumpseat.com/dev/getSegments.php"}).done(function (data) {
        $('#loading-gif').hide();


// display the result here

        output = JSON.parse(data);
        document.write(output);

    });
});

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

如何使用js

1 个答案: