CSS与JS技巧-优快云博客

本文介绍了hover属性的效果及时效性，展示了如何使用CSS伪元素及RGBA调整样式，通过JS操作DOM的className属性，并解释了CSS3中calc()函数的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、hover属性只会在hover的时候有效果，失去hover后同时失效。

2、鼠标悬浮在元素上时触发伪元素样式改变的写法

#bmap:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 40px;
  background-color: red;
  opacity: 0.3;
}
#bmap:hover:after {
  background-color: green;
  opacity: 0.8;
}

3、CSS3 RGB 和 RGBA

RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。

RGBA此色彩模式与RGB相同，只是在RGB模式上新增了Alpha（取值0~1之间，完全透明-完全不透明）透明度。

4、JS改变DOM className 属性

className 属性设置或返回元素的 class 属性。

获取属性值：

HTMLElementObject.className

设置属性值：

HTMLElementObject.className=classname

5、CSS3 calc() 函数

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

CSS属性进阶