CSS DIV 怎么做出来鼠标移动上就显示其内容？ html如何实现鼠标悬停显示文字，鼠标移走文字消失。

div+css \u9f20\u6807\u79fb\u52a8\u4e0a\u53bb\u663e\u793a\u4e0d\u4e00\u6837\u7684\u5185\u5bb9, \u5982\u56fe \u600e\u4e48\u80fd\u5b9e\u73b0\u554a\uff1f

\u6ed1\u52a8\u95e8\u6280\u672f\uff0c\u4e00\u4e0b\u4ee3\u7801\u76f4\u63a5\u4fdd\u5b58\u4e3ahtml\u3002

\u6ed1\u52a8\u95e8

\u4ea7\u54c1\u63cf\u8ff0
\u89c4\u683c\u53c2\u6570

111111111111111

22222222222222

function tab(o, s, cb, ev){//tab\u5207\u6362\u7c7b
var $ = function(o){return document.getElementById(o)};
var css = o.split((s||'_'));
if(css.length!=4)return;
this.event = ev || 'onmouseover';
o = $(o);
if(o){
this.ITEM = [];
o.id = css[0];
var item = o.getElementsByTagName(css[1]);
var j=1;
for(var i=0;i<item.length;i++){
if(item[i].className.indexOf(css[2])>=0 || item[i].className.indexOf(css[3])>=0){
if(item[i].className == css[2])o['cur'] = item[i];
item[i].callBack = cb||function(){};
item[i]['css'] = css;
item[i]['link'] = o;
this.ITEM[j] = item[i];
item[i]['Index'] = j++;
item[i][this.event] = this.ACTIVE;
}
}
return o;
}
}
tab.prototype = {
ACTIVE:function(){
var $ = function(o){return document.getElementById(o)};
this['link']['cur'].className = this['css'][3];
this.className = this['css'][2];
try{
$(this['link']['id']+'_'+this['link']['cur']['Index']).style.display = 'none';
$(this['link']['id']+'_'+this['Index']).style.display = 'block';
}catch(e){}
this.callBack.call(this);
this['link']['cur'] = this;
}
}
new tab('tabCot_product-li-currentBtn-', '-');

\u6700\u7b80\u5355\u7684\u505a\u6cd5\uff0c\u7ed9\u6807\u7b7e\u589e\u52a0title\u5c5e\u6027\uff0c\u5e76\u8d4b\u4e0a\u8981\u663e\u793a\u7684\u5185\u5bb9\uff0c\u4e5f\u5c31\u662f\u6dfb\u52a0title\u5c5e\u6027\u5373\u53ef\u3002
\u4ee3\u7801\uff1a
\u90e8\u5206\u5185\u5bb9
\u6ce8\uff1atitle \u5c5e\u6027\u5e38\u4e0e form \u4ee5\u53ca a \u5143\u7d20\u4e00\u540c\u4f7f\u7528\uff0c\u4ee5\u63d0\u4f9b\u5173\u4e8e\u8f93\u5165\u683c\u5f0f\u548c\u94fe\u63a5\u76ee\u6807\u7684\u4fe1\u606f\u3002\u540c\u65f6\u5b83\u4e5f\u662f abbr \u548c acronym \u5143\u7d20\u7684\u5fc5\u9700\u5c5e\u6027\u3002

\u6269\u5c55\u8d44\u6599\uff1aHTML\u7684title\u5c5e\u6027\u7684\u7528\u6cd5
1\u3001HTML\u7684title\u5c5e\u6027,\u5f53\u5149\u6807\u79fb\u52a8\u5230\u8be5\u6807\u7b7e\u65f6\uff0c\u4fe1\u606f\u63d0\u793a\u6846\u5185\u7684\u5185\u5bb9

\u5c5e\u6027\u9009\u62e9\u5668

2\u3001\u8bbe\u7f6e\u6807\u7b7e\u6837\u5f0f\u65f6\u6307\u5b9a\u3000\u5c5e\u6027css\u6837\u5f0f

css:\u662f\u5c42\u53e0\u6837\u5f0f\u8868

/*\u6709tittle\u5c5e\u6027*/
[title] {
color: darkmagenta;
}
/*\u6307\u5b9atittle\u5c5e\u6027\u503c*/
[title=t] {
color: red;
}

\u5c5e\u6027\u9009\u62e9\u5668

\u5c5e\u6027\u9009\u62e9\u5668\u6307\u5b9a\u5c5e\u6027\u503c

\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1aHTML-\u767e\u5ea6\u767e\u79d1

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

复制下面的代码放到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>


<script>
$(function(){
var aa="这些一行文字就写到这里面";
alert(aa);
$("#testID").mouseover(function(){
$(this).text(aa);
}).mouseout(function(){
$(this).text("");
});
})
</script>
</head>
<body>

<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>

定义和用法

: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

这就要借助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>

html里写
<div class="wenzi">
<span>今天天气好晴朗</span>
</div>
在CSS里写 .wenzi span：hover｛color：#f00；｝

扩展阅读：html+css网页制作成品 ... css怎么让div居中靠左 ... 表格怎么去除#div0 ... 怎么用css给div设置样式 ... css div三种布局方式 ... dw中怎么让网页居中 ... css样式模板网站 ... 用div和css做个人主页 ... csgo 手机号连坐解除 ...

车视网

CSS DIV 怎么做出来鼠标移动上就显示其内容？ html如何实现鼠标悬停显示文字，鼠标移走文字消失。