qq_39196807 2022-03-02 15:52 采纳率: 83%
浏览 75
已结题

鼠标停留不同文字怎么显示与文字相对应的图片?

<!DOCTYPE html>
<html>
<head>
<style>
li{ 
display:inline;
} 
</style>
</head>
<body>
<div class="main">
<ul class="title">
<li>显示图片1<li/>
<li>显示图片2<li/>
<li>显示图片3<li/>
</ul>
<div class="imgs">
<img scr="1.jpg" alt="1">
<img scr="2.jpg" alt="2">
<img scr="3.jpg" alt="3">
</div>
</div>
</body>
</html>

图片都在同一个位置,一次只显示1张图,另外两张图隐藏。

  • 写回答

4条回答 默认 最新

  • 雾里桃花 2022-03-02 16:24
    关注
    
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                li {
                    display: inline;
                }
                img {
                    display: none;
                }
            </style>
        </head>
        <body>
            <div class="main">
                <ul class="title" id='box'>
                    <li class='item' data-index='0'>显示图片1
                        <li />
                    <li class='item' data-index='1'>显示图片2
                        <li />
                    <li class='item' data-index='2'>显示图片3
                        <li />
                </ul>
                <div class="imgs">
                    <img class='img' scr="1.jpg" alt="1">
                    <img class='img' scr="2.jpg" alt="2">
                    <img class='img' scr="3.jpg" alt="3">
                </div>
            </div>
        </body>
        <script>
            let imgs = document.getElementsByClassName('img');
            $('box').onmousemove = function(e) {
                let index = e.target.dataset.index;
                if(index) {
                    hideAll()
                    imgs[index].style.display = 'block';
                }
            }
            
            function hideAll() {
                let imgs = document.getElementsByClassName('img');
                for(let i = 0; i < imgs.length; i++) {
                    imgs[i].style.display = 'none';
                }
            }
            
            function $(id) {
                return document.getElementById(id)
            }
        </script>
    <html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 3月10日
  • 已采纳回答 3月2日
  • 创建了问题 3月2日

悬赏问题

  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器
  • ¥15 爬取网页信息并保存需要完整代码