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

html-css010

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

下面的代码就是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>

这个要配合JS的，单用css做不到，如果你用DW做的话，里边有默认的JS特效可以实现这个效果，如果你用其他编辑器的话可以找个JS自己添加，不过可能需要你后期对JS进行修改，不过不复杂，

<script type="text/javascript">

function show(){

var show=document.getElementById("div")

show.style.display="none"

}

</scirpt>

这是一个简单实现隐藏效果的JS，需要在连接上设置经过或者点击实现效果，就是onmouseover或者onclick。

当然这个JS不够用，需要扩展，你就看着扩展吧，只要对CSS熟悉应该很简单吧。