CSS DIV 怎么做出来鼠标移动上就显示其内容?

比如我有一行文字,鼠标移动上就显示其内容,鼠标离开就不显示内容。不明白的请看图片.谢谢高手....... 比如我有一行文字,鼠标移动上就显示其内容,鼠标离开就不显示内容。不明白的请看图片.谢谢高手.... 展开
 我来答
nndhhs5
2019-04-10 · TA获得超过1.1万个赞
知道答主
回答量:421
采纳率:0%
帮助的人:7.1万
展开全部

用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标签内容:

小迷虎儿
2012-11-22 · TA获得超过841个赞
知道小有建树答主
回答量:568
采纳率:0%
帮助的人:237万
展开全部
复制下面的代码放到html文件保存就实现了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://img.lanrentuku.com/img/js/jquery.js"></script>
<!--上面这个链接你可以加着,也可以用360浏览器下载下来,放到本地外链,这是函数库,JQuery可以去单独学习这个,这个兼容所有浏览器,和JS一样,只不过是比JS好用,同样的同东西-->
<!--下面是调用上面的函数库,再进一步的编程-->
<script>
$(function(){
var aa="这些一行文字就写到这里面";
alert(aa);
$("#testID").mouseover(function(){
$(this).text(aa);
}).mouseout(function(){
$(this).text("");
});
})
</script>
</head>
<body>
<!--这里面的样式你应该能看得懂吧,不用管这些,跟上面的Js没关系,只是加上style里面的东西看着会好看些,只是写了些背景字体大小和字体颜色的样式-->
<div style="width:400px; height:50px; margin:0 auto; background-color:#6C3; color:#FC6; font-size:20px; font-weight:bold; line-height:50px; text-align:center;" id="testID">
</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
陶矷
2017-08-04 · TA获得超过399个赞
知道小有建树答主
回答量:322
采纳率:57%
帮助的人:186万
展开全部

定义和用法

: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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
敞亮丶af765
推荐于2017-08-04 · TA获得超过479个赞
知道小有建树答主
回答量:214
采纳率:0%
帮助的人:77.1万
展开全部

这就要借助js代码了

<body>
<div id="warp" onmouseover="over()" onmouseout="out()">
<div id="text" style="display: none;">这里面有一段文字</div>
</div>
</body>
<script type="text/javascript">
function over(){
var div = document.getElementById('warp');//获取大div对象
var text = document.getElementById('text');//获取文字div对象
text.style.display="block";
}//鼠标进入显示文字
function out(){
var div = document.getElementById('warp');
var text = document.getElementById('text');
text.style.display="none";
}//鼠标退出不显示文字
</script>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
阿笑情感屋
2017-07-10 · 阿笑情感屋:分享情感,故事、心理学知识。
阿笑情感屋
采纳数:3 获赞数:50

向TA提问 私信TA
展开全部
html里写
<div class="wenzi">
<span>今天天气好晴朗</span>
</div>
在CSS里写 .wenzi span:hover{color:#f00;}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(6)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式