CSS DIV 怎么做出来鼠标移动上就显示其内容？
2个回答
展开全部
用css伪类hover可以实现这个功能。
1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加p标签，为p标签添加内容：
2、为了方便演示，给div标签设置宽高和背景颜色，然后给p标签设置“display”属性，属性值为“none”，这样p标签中的文字默认情况下不会显示：
3、给div设置hover伪类，当鼠标移动到div区域时，设置p标签的样式为块级元素“block”：
4、这样当鼠标移动到div上时就会显示p标签内容，鼠标离开就不显示p标签内容：
1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加p标签，为p标签添加内容：
2、为了方便演示，给div标签设置宽高和背景颜色，然后给p标签设置“display”属性，属性值为“none”，这样p标签中的文字默认情况下不会显示：
3、给div设置hover伪类，当鼠标移动到div区域时，设置p标签的样式为块级元素“block”：
4、这样当鼠标移动到div上时就会显示p标签内容，鼠标离开就不显示p标签内容：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
定义和用法
:hover
伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到
HTML
文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过
CSS
没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持
CSS
的浏览器中以不同的方式显示出来：
a:link
{color:
#FF0000}
/*
未访问的链接
*/
a:visited
{color:
#00FF00}
/*
已访问的链接
*/
a:hover
{color:
#FF00FF}
/*
当有鼠标悬停在链接上
*/
a:active
{color:
#0000FF}
/*
被选择的链接
*/
注释：为了产生预期的效果，在
CSS
定义中，a:hover
必须位于
a:link
和
a:visited
之后！！
注释：为了产生预期的效果，在
CSS
定义中，a:active
必须位于
a:hover
之后！！
注释：Pseudo-class（伪类）的名称对大小写不敏感。
注释：伪类可与
CSS
类配合使用：
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>from
http://www.w3school.com.cn/cssref/pr_pseudo_hover.asp
:hover
伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到
HTML
文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过
CSS
没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持
CSS
的浏览器中以不同的方式显示出来：
a:link
{color:
#FF0000}
/*
未访问的链接
*/
a:visited
{color:
#00FF00}
/*
已访问的链接
*/
a:hover
{color:
#FF00FF}
/*
当有鼠标悬停在链接上
*/
a:active
{color:
#0000FF}
/*
被选择的链接
*/
注释：为了产生预期的效果，在
CSS
定义中，a:hover
必须位于
a:link
和
a:visited
之后！！
注释：为了产生预期的效果，在
CSS
定义中，a:active
必须位于
a:hover
之后！！
注释：Pseudo-class（伪类）的名称对大小写不敏感。
注释：伪类可与
CSS
类配合使用：
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>from
http://www.w3school.com.cn/cssref/pr_pseudo_hover.asp
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
