html中鼠标移走的伪元素,css中伪元素before或after中content的特殊用法attr

前言

前端技术发展很快，我之前写的js和jquery懒加载之可视区域加载，貌似谷歌，火狐等浏览器推出了新的方法，IntersectionObserver,可以高效的检测出某一个元素是否进入了可视区域！不过这个只有在谷歌51以上版本才可以使用！因此，关于这个属性，后面大面积推广之后，再给大家介绍。今天主要给讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果！

知识点回顾

关于伪类及伪元素，我前面文章已经经过，before和after也写过相关文章http://www.haorooms.com/post/css_common 第十条。

content除了上面的用法之外，还可以如下写：

content: attr(data-haorooms);

获取哪个属性。

我们就是利用这个知识点。

纯css制作精美鼠标移上去显示tips效果

看如下案例：

html代码如下：

haorooms测试

css代码如下：

.haorooms{margin-top:30px}

span{

position: relative;

display: inline-block;

}

span:hover{

cursor: pointer;

}

span:hover:before{

content: attr(data-haorooms);

background-color: #2085c5;

border-radius:3px;

color: #fff;

padding: 10px;

position: absolute;

left: 100%;

top: -70%;

margin-left: 8px;

white-space: pre;

}

span:hover:after{

content: "";

position: absolute;

width: 0;

height: 0;

border-right: 8px solid #2085c5;

border-top: 8px solid transparent;

border-bottom: 8px solid transparent;

}

当然，用纯css写tips，还有其他办法！例如我右侧微信公众号的hover,可以把tips先隐藏起来，然后hover让其显示出来，也可以！这个只是介绍一种方法！

制作半边文字

效果如下：

html代码：

前

端

博

客

css代码：

.haorooms {

position:relative;

display:inline-block;

font-size:80px; /* 任何宽度都可以 */

color: black; /* 任何颜色，或透明 */

overflow:hidden;

white-space: pre; /* 处理空格 */

}

.haorooms:before {

display:block;

z-index:1;

position:absolute;

top:0;

left:0;

width: 50%;

content: attr(data-content); /* 伪元素的动态获取内容 */

overflow:hidden;

color: #f00;

}

今天就暂时写到这里，假如你还有其他的实现方式，或者更简单的实现方式！欢迎留言交流！