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

html-css018

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>

使用css设置鼠标放置在链接上时的样式应使用hover选择器。hover选择器：算是交互式的，是鼠标移上去回发生效果。定义和用法：：hover在鼠标移到链接上时添加的特殊样式。提示：hover选择器器可用于所有元素，是链接。比如说下拉菜单功能，鼠标移上去会显示菜单：在dropdown-content里设置了displaynone，就是把这两行隐藏，给dropdown添加了hover选择器，效果是displayblock，变为块级元素，就形成了鼠标移过去显示菜单的效果。