伪类应用一: 不动用JS来实现图片与文字的切换

首先来看下面这个效果:

GIF1.gif

鼠标 移入移出 实现 图片和文字的切换, 一般我们有两个思路,
一是用 伪类 :hover
二是用 JS来实现.
这里我们来用 伪类:hover 来实现, 看下面代码:

  

    
熊猫 萌主
  

/* css */
.box {
  height: 140px;
  width: 200px;
  background: #ddd url(https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D400/sign=344197115a0fd9f9a0175469152cd42b/77094b36acaf2edd7c75f184861001e9380193d3.jpg) center center no-repeat;
  background-size: cover;
  
}
.item-1 {
  text-align: center;
  line-height: 140px;
 font-size: 30px;
  background: #fff;
  display: none;    /* 设置子元素隐蔽*/
}

.box:hover .item-1 {  /* 核心代码: 父元素可以通过伪类来控制自己的子元素的css样式 */
  display: block;  /* 鼠标悬停,子元素浮现 */
  color: red;
  border: 1px solid red;
  box-shadow: 2px 2px 4px #ddd;
}

总结:
① 在前端, 通过一个元素 去 控制 另一个元素, 我们首先想到的是运用JS, 但是一种情况除外.那就是 伪类
② 伪类一般是除了来控制 自身的css样式, 还可以来通过伪类来控制 自身子元素的css样式.且只能控制元素自身盒子内的子元素, 到了盒子外就"鞭长莫及"