js鼠标经过文字显示图片预览，jquery效果

最新推荐文章于 2022-02-26 22:01:25 发布

原创最新推荐文章于 2022-02-26 22:01:25 发布 · 置顶 · 3.8w 阅读

9 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

web 同时被 3 个专栏收录

12 篇文章

订阅专栏

6 篇文章

订阅专栏

jquery

5 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现：当鼠标悬停在链接上时，显示一张图片。通过内联样式和事件监听实现了这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style>
            .wrap {
                position:relative;
            }
            .inner {
                display:none;
                position:absolute; top:30px; left:100px;
                width:100px; height:100px;
                border:0px solid #000;
                background:#fff;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <a href="">当鼠标指到我，出来图片</a>
            <div class="inner">
                <img src="./1.jpg" />       
            </div>
        </div>
        <script>
            var $ = function(id){
                return document.getElementById(id);
            };
            var $t = function(tag, cot){
                cot = cot || document;
                return cot.getElementsByTagName(tag);
            };
            $t('a')[0].onmouseover = function(){
                $t('div', this.parentNode)[0].style.display = 'block';
            }
            $t('a')[0].onmouseout = function(){
                $t('div', this.parentNode)[0].style.display = 'none';
            }           
        </script>
    </body>
</html>