css如何实现鼠标悬停的提示效果

html-css016

css如何实现鼠标悬停的提示效果,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin:0padding:0}

ul{list-style-type: none}

ul>li{float:leftmargin-right: 10pxposition: relativewidth:100px}

li>span{display: noneposition: absolutetop: 20pxbackground: #ccc}

li:hover >span{display: block}

</style>

</head>

<body>

<ul>

<li>提示<span>任务中心</span></li>

<li>提示<span>通知</span></li>

<li>提示<span>装扮</span></li>

</ul>

</body>

</html>

下面的代码就是css实现的鼠标悬停，你看下是不是你要的。不行就追问我。可能样式不是你想要的，你可以自行修改一下样式。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin:0padding:0}

ul{list-style-type: none}

ul>li{float:leftmargin-right: 10pxposition: relativewidth:100px}

li>span{display: noneposition: absolutetop: 20pxbackground: #ccc}

li:hover >span{display: block}

</style>

</head>

<body>

<ul>

<li>提示<span>任务中心</span></li>

<li>提示<span>通知</span></li>

<li>提示<span>装扮</span></li>

</ul>

</body>

</html>