html使用css让列表项在鼠标悬停时出现提示信息

81次阅读
没有评论

要让有序列表项在鼠标悬停时出现提示信息,可以使用HTML的title属性。当鼠标悬停在元素上时,浏览器会显示出title属性中的文本内容。

下面是一个示例,演示如何在一个有序列表中添加title属性来显示鼠标悬停提示信息:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hover over list items to see tooltips</title>
</head>
<body>
<ol>
    <li title="This is the first item">Item 1</li>
    <li title="This is the second item">Item 2</li>
    <li title="This is the third item">Item 3</li>
</ol>
</body>
</html>

在上面的例子中,每个有序列表项都有一个title属性,用来存储显示在鼠标悬停时的提示信息。当鼠标悬停在任何一个列表项上时,浏览器都会显示相应的提示信息。

需要注意的是,虽然title属性很方便,但是对于屏幕阅读器等辅助技术来说可能并不友好。因此,最好还是在列表项中提供其他的描述信息,比如使用aria-label属性等。

正文完
 
评论(没有评论)