鼠标放上显示文字描述

erdouzhang

于 2017-07-06 14:14:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/73480767

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript技术，实现在鼠标悬停时显示元素的文字描述。通过创建数据属性存储描述信息，利用CSS控制显示隐藏，并结合JavaScript增强交互体验。

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

这里写图片描述

html:

<ul id="list">
    <li>
        <img src="img/1.jpg" alt="">
        <div>海上小帆船</div><!-- div是浮动的文字描述，定位子绝父相 -->
    </li>
    <li>
        <img src="img/2.jpg" alt="">
        <div>小台灯</div>
    </li>
    <li>
        <img src="img/3.jpg" alt="">
        <div>海边椰树</div>
    </li>       
</ul>

css：

li {            
    float: left;
    margin-right: 40px; 
    list-style: none;       
    position: relative;         
}
div { /* div是浮动的文字描述，用定位 */         
    position: absolute;
    width: 120px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: pink;
    top: 200px;
    left: -5px;
    display: none;
}

js：

window.onload = function(){
    var list = document.getElementById('list');//获取ul
    var lis = list.getElementsByTagName('li');//获取ul下所有li
    for(var i=0;i<lis.length;i++){//遍历li元素
        lis[i].onmouseover = function(){
            this.getElementsByTagName('div')[0].style.display = 'block';//找到li元素下面的div元素
        };
        lis[i].onmouseout = function(){
            this.getElementsByTagName('div')[0].style.display = 'none';
        }
    }
}