css是个很奇妙的东西。至于怎么奇妙，可以 参考文档
鼠标移动到目标 显示效果
<style>
/* 选择鼠标指针位于其上的链接 呈现效果 */
.shady:hover{
color: white;
}
/* 原样式 */
.shady{
color:black;
/* 过渡效果1s */
transition:1s;
}
</style>
<body>
<h1 class="shady">阿姨你行不行</h1>
</body>
阿姨你行不行
用多种CSS达到 悬浮提示框效果
/* 定位 搭配隐藏 */
.prompt_div{
position: relative;
height: 40px;
width: 120px;
background:green;
line-height:40px;
text-align:center;
}
/* 隐藏定位栏 */
.hide_div{
display: none;
color: black;
width: 220px;
height: 90px;
background:rgba(244, 244, 244);
position: absolute;
left:0px;
box-shadow:4px 4px 5px #ccc;
}
/* 鼠标移动到 显示定位栏 */
.prompt_div:hover div{
display: block;
}
<div class="prompt_div">显示提示？<div class="hide_div">展示提示</div></div>
显示提示？
这是用到了position定位+display区域显示
CSS三种写法的优先级
html文件内部内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>css样式优先级</title>
<!-- 外部样式 -->
<link href="index.css" rel="stylesheet" type="text/css"/>
<!-- 内页样式 -->
<style type="text/css">
.box{
background:red;
border:1px
solid black;
width:100px;
height:100px;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<div style="background:yellow;width:100px;height:100px;" class="box">
</div>
</body>
</html>
引用的css文件内容
.box{ width:100px; height:100px; background:blue; }
结果显示为 行内式的css效果：
所以，我们得知 CSS三种写的优先级是：行内样式＞内页样式＞外部样式
