我们得到了一项任务，要制作一个带有背景图片和下面几个标题的 div，当您将鼠标悬停在标题上时，它会更改 div 中的背景图片(“缩略图”)。我真的是 jQuery 的新手，不知道如何处理这个问题。我尝试了以下代码，但它不起作用。
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<script>
$(function() {
$('ul a')
.mouseover(function() {
$('thumbnail').attr('src', this.getAttribute('data-image-src'));
})
.each(function() {
new Image().src = this.getAttribute('data-image-src');
});
}
</script>
<body class="body">
<!--Header-->
<header class="header">
<div class="logo">
<div class="logoimg"><a href="land.html"><img src="logo.png" width="80px" width="auto"></a></div>
</div>
<nav class="navbar">
<a href="about.html">About</a>
<a href="work.html">Work</a>
</nav>
</header>
<!--Main1-->
<div class="thumbnail"><img src="back1.jpg" width="auto" height="auto"></div>
<ul class="headlines">
<a href="#" class="mylink" data-image-src="back1.jpg" id="link1">link1</a>
<a href="#" class="mylink" data-image-src="back2.jpg" id="link2">link2</a>
<a href="#" class="mylink" id="link3" data-image-src="back3.jpg">link3</a>
<a href="#" class="mylink" id="link4">link4</a>
</ul>
<!--Footer-->
<footer class="footer">
<p class="fotext">Copyright Vítek Linhart 2017. Don't steal my shit.</p>
</footer>
</body>
</html>
我感谢任何帮助:)
最佳答案
我想这就是您要找的东西。不是经过测试的代码。你错过了说缩略图是一个类，它也可以是来自 jquery 的悬停事件(查看 api.jquery 的例子)
<script>
$(function() {
$('ul a').hover(function() {
$('.thumbnail img').attr('src', $(this).data('imageSrc'));
});
});
</script>
关于javascript - 使用 jQuery/Javascript 在将鼠标悬停在文本上时切换 div 中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45907910/