1.默认时候的样式
2.鼠标划过的样式
代码如下:(在这里先画个圈圈诅咒一下他----你是最胖的T T)
<div class="mr_skill_con">
<span class="mr_skill_name">平均消费值(元):</span>
<span class="mr_skill_plan">
<!--最大宽度320-->
<em style="width:320px;">
</em>
</span>
<!--备注下面的left要比上面的宽度大120px;-->
<div class="mr_skill_circle" style="left: 440px;">
<div class="skill-text">
<h5>会员:</h5>
<p>88888888</p>
</div>
</div>
<div class="mr_skill_circle2" style="left:270px;">
<div class="skill-text2">
<h5>总数:</h5>
<p>86328632</p>
</div>
</div>
</div>
/*画图*/
.mr_skill_con { padding-left: 10px; margin-bottom: 18px; position: relative;}
/*平均消费值等名字*/
.mr_skill_con .mr_skill_name { width: 102px; height: 24px; text-align: right; margin-right: 11px; word-wrap: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #333; font-family: "Microsoft YaHei"; }
/*总的长度*/
.mr_skill_con .mr_skill_plan { position: relative; width: 320px; height: 10px; border-radius: 4px; background-color: #eee; margin-right: 21px; }
/*单个的长度*/
.mr_skill_con .mr_skill_plan em { position: absolute; left: 0; top: 0; display: inline-block; height: 10px; background-color: #00b88d; border-radius: 4px; overflow: hidden; }
/*精通*/
.mr_skill_con span { vertical-align: middle; display: inline-block; }
.mr_skill_con .mr_skill_circle { display: inline-block; width: 5px; height: 5px; position: absolute; left: 122px; top: 9px; background: #fff ;border-radius: 50%}
.mr_skill_con .mr_skill_circle b{ position: absolute; left: 0px; top: 0px; font-size: 12px; color: #333; font-style: normal }
.skill-text{height:16px;position: absolute; left: -63px; top: 7px; ;width:130px;display: flex;}
.skill-text p{line-height:16px;text-align: center;font-size: 12px; color: #333;font-style: normal;font-weight: bold;flex: 1}
.skill-text h5{flex: 3;font-weight: bold;font-size: 14px;color: #48cda6;display:none}
.mr_skill_con:hover .skill-text h5{display: block}
.mr_skill_con:hover .skill-text p{flex: 7;text-align: left}
.mr_skill_circle2{position: absolute; top:2px; left:0; width: 0px; height: 0px; border-top: 6px solid #48cda6; border-right: 3px solid transparent; border-left: 3px solid transparent;}
.mr_skill_circle2 .skill-text2{position: absolute;bottom: 5px;left: -66px; top:-23px; ;width:130px;display: flex;}
.mr_skill_circle2 .skill-text2 p{ position: relative;font-size: 12px; line-height:16px;text-align: center; color: #48cda6;font-style: normal;font-weight: bold ;flex: 1}
.mr_skill_circle2 .skill-text2 h5{flex: 3;font-weight: bold;font-size: 14px;color: #48cda6;display:none}
.mr_skill_con:hover .skill-text2 h5{display: block}
.mr_skill_con:hover .skill-text2 p{flex: 7;text-align: left}