鼠标悬停微信图标弹出图片问题

Question

鼠标悬停微信图标弹窗问题，为啥我现在鼠标悬停在微信图标上 元素在变 但是不弹出来图片

```javascript
<script>
            document.addEventListener('DOMContentLoaded', function() {  
            var tooltip = document.getElementById('tooltip');  
            var weixinIcon = document.querySelector('.fab.fa-weixin');  
            var wxImage = document.getElementById('wx-image');  

            weixinIcon.addEventListener('mouseenter', function() {  /* 修改这里 */
                tooltip.style.display = 'block';  
//                document.write("1")
                wxImage.style.display = 'block';  
            });  

            weixinIcon.addEventListener('mouseleave', function() {  /* 修改这里 */
                tooltip.style.display = 'none';  
                
                wxImage.style.display = 'none';  
            });  
        });

    </script>

<li>
                            <a class="facebook text-center">
```css
.social_media ul li {
    list-style: none;
    margin-bottom: 1em;
}

.social_media ul li a {
    float: right; 
    display: block;
    color: #000000;
    text-decoration: none;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    line-height: 34px;
    background: transparent;
    border: 2px solid #fff;
}

#tooltip {  
    display: none;  
    position: relative;  
    top: 20px; /* 调整垂直位置 */
    z-index: 999; /* 设置一个较高的 z-index */
    left: 20px; /* 调整水平位置 */
    
}

                            <i class="fab fa-weixin" aria-hidden="true"></i>
                            <div id="tooltip" class="tooltip">  
                                <img id="wx-image" src="images/wx.jpg" class="new-icon"> 
                            </div>
                        </a>
                    </li>

Answer 1

【以下回答由 GPT 生成】

问题标题: 解决鼠标悬停微信图标不弹出图片的Javascript代码问题 问题标签: javascript, 图片弹出, 鼠标悬停, CSS选择器 问题内容: 当鼠标悬停在微信图标上时，希望能够弹出图片。目前，我尝试了以下Javascript代码，但鼠标悬停时元素变化却没有弹出图片。请帮我优化代码，解决这个问题。

我尝试的Javascript代码如下所示：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var tooltip = document.getElementById('tooltip');
        var weixinIcon = document.querySelector('.fab.fa-weixin');
        var wxImage = document.getElementById('wx-image');

        weixinIcon.addEventListener('mouseenter', function() {  /* 修改这里 */
            tooltip.style.display = 'block';
            wxImage.style.display = 'block';
        });

        weixinIcon.addEventListener('mouseleave', function() {  /* 修改这里 */
            tooltip.style.display = 'none';
            wxImage.style.display = 'none';
        });
    });
</script>

请注意，以上代码中的部分内容需要根据你的HTML结构进行修改。

首先，我注意到你提供的HTML代码片段中缺少闭合的标签。请确保给出的HTML代码完整且正确。对于下面给出的解决方案，我将使用以下HTML结构作为示例：

<li>
    <a class="fab fa-weixin"></a>
    <div id="tooltip">
        <img id="wx-image" src="path_to_image.png" alt="微信图片">
    </div>
</li>

根据你的描述，鼠标悬停微信图标时应弹出图片。为了使代码可行，我们需要确保微信图标元素正确选择，并为其添加事件监听器。我们还需要确保正确选择和操作弹窗和图片元素。

下面是我推荐的用于解决问题的优化代码：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var tooltip = document.getElementById('tooltip');
        var weixinIcon = document.querySelector('.fab.fa-weixin');
        var wxImage = document.getElementById('wx-image');

        weixinIcon.addEventListener('mouseenter', function() {
            tooltip.style.display = 'block';
            wxImage.style.display = 'block';
        });

        weixinIcon.addEventListener('mouseleave', function() {
            tooltip.style.display = 'none';
            wxImage.style.display = 'none';
        });
    });
</script>

请注意，以上代码假设你的鼠标悬停微信图标的HTML结构如示例所示。请根据你的实际情况进行相应调整。

希望以上解决方案能帮助你解决问题。如果你还有任何疑问，请随时提出。

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7628063
• 这篇博客也不错, 你可以看下微信小程序 通过场景值判断从什么路径进入微信小程序
• 您还可以看一下 田德华老师的小程序·云开发实战 微信朋友圈所有功能课程中的 把用户信息设置到缓存，实现自动登录小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 设计一个程序，每秒统计一次当前系统的进程状况，并按照内存使用自多到少排序打印输出相关信息。中的 题目要求 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^