CSS visibility 属性 元素是否可见
2015-11-11 15:33
465 查看
实现效果:鼠标经过div01,div02显示;鼠标经过div02,div02不显示;
问题是当我经过div02所在的位置时div02还是会显现
<!DOCTYPE HTML>
<html lang="en"> //默认就是en
<head>
<meta http-equiv="refresh" content="text/html; charset=utf-8" />
<title>HTML5结构标签应用</title>
<style>
.div01{
width:200px;
height:200px;
border:1px solid black;
}
.div02{
width:100px;
height:100px;
position:absolute;
top:200px;
left:200px;
background-color:yellow;
transition:0.3s;
-webkit-transition:.5s;
-moz-transition:.5s;
visibility: hidden;
/*opacity:0;*/
}
.div01:hover .div02{
background-color:red;
display:inline-block;
visibility: visible;
/*opacity:1;*/
}
</style>
</head>
<body>
/*重点是visibility。假如是opacity的话那经过b也会显现*/
<div class="div01">
<div class="div02"></div>
</div>
<div></div>
</body>
</html>
为什么我不改成能显示中文?改了之后一样中英文都可以,有什么区别吗?
这个主要是给搜索引擎看的,搜索引擎不会去判断该站点是中文站还是英文站,所以这句话就是让搜索引擎知道,你的站点是中文站,对html页面本身不会有影响 这些现在都是html规范,你的页面越规范,就越容易被收录
问题是当我经过div02所在的位置时div02还是会显现
<!DOCTYPE HTML>
<html lang="en"> //默认就是en
<head>
<meta http-equiv="refresh" content="text/html; charset=utf-8" />
<title>HTML5结构标签应用</title>
<style>
.div01{
width:200px;
height:200px;
border:1px solid black;
}
.div02{
width:100px;
height:100px;
position:absolute;
top:200px;
left:200px;
background-color:yellow;
transition:0.3s;
-webkit-transition:.5s;
-moz-transition:.5s;
visibility: hidden;
/*opacity:0;*/
}
.div01:hover .div02{
background-color:red;
display:inline-block;
visibility: visible;
/*opacity:1;*/
}
</style>
</head>
<body>
/*重点是visibility。假如是opacity的话那经过b也会显现*/
<div class="div01">
<div class="div02"></div>
</div>
<div></div>
</body>
</html>
相关文章推荐
- html&css 学习资料
- HTML与CSS入门——第二章 发布Web内容
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- 前端开发问题(CSS部分)
- ie浏览器 谷歌浏览器,div 滚动条样式
- POI 读取 Excel 转 HTML 支持 03xls 和 07xlsx 版本 包含样式,03xls07xlsx
- HTML与CSS入门——第一章 理解Web的工作方式
- [css]我要用css画幅画(二)
- js+css控制弹出小窗口之后,后整个页面背景图变色,并且不可操作,点击确定,页面跳转。。。
- 两列布局,读《css那些事儿》
- CSS-页面特效
- CSS3选择器(二)
- css 实现单行或者多行超出后显示...
- jsp页面如何调用css样式
- 整理base.css,重设浏览器样式
- CSS3中2D,3D效果
- CSS3 border-radius属性
- Css3 弹性盒子垂直居中
- 【转】一个DIV+CSS代码布局的简单导航条
- 【转】div居中代码 DIV水平居中显示CSS代码