使用jQuery/Javascript在文本上悬停时切换div中的图像_Javascript_Jquery_Html_Css

使用jQuery/Javascript在文本上悬停时切换div中的图像

javascript jquery html css

使用jQuery/Javascript在文本上悬停时切换div中的图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我们被指派制作一个带有背景图像和两个标题的div，当您将鼠标悬停在标题上时，它会更改div中的背景图片（“缩略图”）。我对jQuery真的很陌生，不知道如何处理这个问题。我尝试了以下代码，但它不起作用 <!DOCTYPE html> <html lang=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><

我们被指派制作一个带有背景图像和两个标题的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>


文件夹
$（函数（）{
$（'ul a'）
.mouseover（函数（）{
$（'thumbnail'）.attr（'src'，this.getAttribute（'data-image-src'））；
})
.each（函数（{
new Image（）.src=this.getAttribute（'data-Image-src'）；
});
}


维泰克·林哈特2017版权所有。别偷我的东西

非常感谢您的帮助：）

您可以使用悬停事件：

也可以看看这个例子：

我想这就是你要找的东西。不是经过测试的代码。您没有说thumbnail是一个类，它也可以是jquery中的悬停事件（查看api.jquery以获取示例）


$（函数（）{
$（'ul a'）。悬停（函数（）{
$（'.thumbnail img'）.attr（'src'，$（this.data（'imageSrc'））；
});
});

我用这个代码解决了这个问题。不过我想问一下，是否有可能让它变成动画。当“图片”开关切换时，制作淡入淡出动画

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('a').on('mouseover', function() {
        var iSrc = $(this).attr('data-image-src');
        $('.thumbnail img').attr('src', iSrc);
      });

    });
  </script>


$（函数（）{
$（'a'）。在（'mouseover'，function（）上{
var iSrc=$（this.attr（'data-image-src'）；
$（'.thumbnail img'）.attr（'src'，iSrc）；
});
});

尝试写入

$（'.thumbnail img'）.attr（）

，您将src设置为

div

而不是

img

并使用css选择器。我尝试过，但它仍然无法切换图像。我查看了它，但我不太明白如何将图片附加到div中，示例对我没有多大帮助：/。顺便问一下，您是否有意将imageSrc切换为data image src？数据源没有加载图像，这难道不是一个错误吗？如果您从jquery访问html中的数据属性，您可以按照我访问的方式访问数据图像src（查看jquery文档）。关闭要在jquery加载上执行的函数时出错。我已经编辑了答案，只需将您的脚本块替换为我粘贴的脚本块即可访问数据属性，请遵循以下js FIDLE。我想这会有帮助的-

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('a').on('mouseover', function() {
        var iSrc = $(this).attr('data-image-src');
        $('.thumbnail img').attr('src', iSrc);
      });

    });
  </script>