使用鼠标悬停时尝试在不同的 DIV 标记中显示图像答案

【问题标题】：Trying to display image in a different DIV tag when using mouseover使用鼠标悬停时尝试在不同的 DIV 标记中显示图像
【发布时间】：2020-06-04 09:35:29
【问题描述】：

我有一个包含链接列表的下拉菜单。链接列表位于标签下拉菜单中，我正在尝试使用鼠标悬停事件在单独的标签中显示不同的图像。当用户光标位于文本链接上时，图片位置将出现不同的图像。我可以使用 CSS 而不是 JavaScript 来做到这一点吗？我正在尝试对此进行编码，以便可以在其他下拉菜单中使用它，因此我需要一种方法来对其进行编码，而不必使用 z 定位等屏幕位置进行编码。我希望图片显示在没有可用图片的位置，该图片位于与链接列表不同的 div 标签中。此链接和图片路径列表来自数据库，因此是动态创建的。

代码示例：

<div>
<ul>
list of links...
</ul>
</div>

<div>
<img src="image location">
</div>

Picture of dropdown menu

【问题讨论】：

你肯定需要 javascript。
当您将鼠标悬停在
标记中的链接上时，图像应该会发生变化。这是你想要的吗？？如果是，则可以通过 javascript/jquery 完成。

【解决方案1】：

您可以尝试这种方式，也可以即兴创作。希望对你有帮助

/* jquery script */

$(document).ready(function(){
    $('.linktag').mouseover(function(){
        var _datahref = $(this).attr('data-href');
        $('#targetdiv').attr('src', _datahref);
    });
});

<!-- HTML -->

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <div>
        <ul>
            <li>
                <a class="linktag" href="javascript:void(0);" data-href="https://www.jobboardfinder.com/upload/1c7f578db0e8d9673c95dd5b1c7122c5a36081b0/logo_jobboard.png">link1</a>
            </li>
            <li>
                <a class="linktag" href="javascript:void(0);" data-href="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png">link2</a>
            </li>
        </ul>
    </div>
    <img id="targetdiv" width="100" height="100" src="https://www.laxmipharma.net/img/product/No_Image_Available.jpg">

</body>
</html>

【讨论】：

它有效，但我还有一个问题。我使用上面只有黑色 txt 的图像对其进行了测试，并且脚本有效。当我使用文件大小较大的彩色图像时，它们不会显示。它显示 DOM7009: Unable to decode image at URL 错误。它在所有浏览器中都这样做。该脚本适用于一个小的黑白图像，但对于字节大小较大的图像会出现此错误。我尝试以字节大小缩小图像，但它仍然给出这个错误并且仍然不会显示图像，除非我只使用（小字节大小）黑白图像。有什么想法吗？
或者它可以帮助你更多stackoverflow.com/questions/27934411/…
当我使用小黑白图像时，您发布的脚本效果很好，但是当我抓取文件大小较大的彩色图像时，它给了我这个错误。 DOM 7009：无法在 URL 处解码图像。图像尺寸相同，但字节大小不同。
感谢您的帮助，但我想通了。我真是个白痴哈哈。我正在将 .htaccess 文件传输到服务器，并在对这些文件进行 FTP 传输时将传输更改为 ASCII。我忘了把它改回自动 ASCII 或 BINARY，当以 ASCII 格式上传这些图像时，这就是它们不起作用的原因。我想我会发布这个，这样其他人就不会犯同样的错误。感谢您的帮助，您发布的脚本效果很好。
@miff 太好了。你可以接受我的回答。它也会为你赢得一些代表点数。