使用 hover 伪类 和 盒子模型实现 米哈游官网 导航栏的动画效果。
需求，图标本身没有特效，当鼠标放上去时浮现出周围的蓝色边框，并且鼠标变成选中样式，那怎么做呢？
关键点：主要是鼠标悬停时改变样式。需要边框，但边框不是紧挨着图标的。
image.png
image.png
使用 hover 来触发悬停时增加样式，使用transtition增加过渡效果

案例分析

image.png
image.png
可以看到，在原本的img图标外还有一个盒子，其具有内外边距和一个透明的边框。必须要设置一个透明边框，因为如果本来没有边框的宽度，新增边框的话会额外增加像素，造成塌缩。
分析：

  1. 需要用img标签导入图标，可以将img设置成块级block（img原生是行内块级）
  2. 需要在img外套一个盒子，并且由于该图标是导航栏效果，不能使用块级元素（因为块级会独占一行），可以使用代表导航栏的标签 nav（nav默认是块级元素，所以需要将其修改为浮动flex元素或者行内块元素）或者使用div并将div修改为行内块元素即可。
  3. 需要将nav盒子的宽高设置为和图标的大小一样，即盒子紧贴图标（这样做的好处是增加内边距时图标会默认保持在盒子中间，而不会偏移）然后通过增加内边距padding将盒子撑开，让之后的边框远离图标，形成需要的效果。
  4. 给nav盒子设置一个透明的实线边框，为之后边框变色预留位置，避免造成塌陷。
  5. 设置hover伪类，修改边框的颜色，边框的宽度必须和盒子预留的相同，避免造成塌陷。
  6. 给nav盒子添加一个transition属性，指定边框为变化元素，并设置过渡时间300ms（米哈游官网是300ms）
  7. 给 hover 伪类 设置一个 cursor 游标属性，将其值设置为pointer，即可改变鼠标指针的样式。
  8. 设置box-sizing为contentbox，这样修改内外边距或者边框的宽度时会修改内容content的高宽，而不会向外延申或者偏离，避免造成塌陷。
  9. 需要将nav的显示模式修改为浮动flex或者行内块元素line-block，如果使用flex的话还需要给定额外的参数，本例中使用较为简单的line-block
  10. 以上了解了，就可以开干了。

前提要点：
要习惯css的前置步骤：

  1. 将网页原生的内外边距清零。
  2. 习惯设置盒子在网页中水平居中（margin: 0 auto;）
  3. 必须给父亲盒子设置overflow:hidden或者添加边框，让子元素能以父元素为坐标，而不会溢出父元素（不是以整个网页为坐标）

开干！

  1.  <!-- 我们这里使用类选择器，当然也可以直接用nav选择器 -->
  2.   <nav class="bh3">
  3.     <img src="./bh3.png" alt="YoHo">
  4.   </nav>
  5. <style>
  6.     * {
  7.       margin: 0;
  8.       padding: 0;
  9.     }
  11.     html {
  12.        /* 给网页设置默认的字体大小，之后子元素的字体、圆角等属性都可以用rem来设置以父元素字体大小为基础的比例 */
  13.       font-size: 14px;
  14.     }
  16.     body {
  17.       /* rem单位表示父元素字体大小的倍数，0.24则表示父元素字体大小的0.24倍，即 14px 乘 0.24 */
  18.       font-size: 0.24rem
  19.     }
  21.     .bh3 {
  22.       /*将nav修改为行内块元素，可以存放多个导航图标，而不是独占一行*/
  23.       display: inline-block;
  24.       width: 140px;
  25.       height: 140px;
  26.       margin: 0 auto;
  27.       margin-bottom: 50px;
  28.       padding: 4px;
  29.       /* overflow: hidden; */
  30.       text-align: center;
  31.       border-radius: 0.6rem;
  32.       /* 这里需要预设一个透明的边框，不然在hover中添加边框时会因为额外多出了边框的像素而造成页面塌陷 */
  33.       border: 4px solid transparent;
  34.       /* 设置过渡元素和过渡时间 */
  35.       transition: border 300ms;
  36.       /* 修改鼠标(游标)指针的样式为手指 */
  37.       cursor: pointer;
  38.     }
  40.     .bh3:hover {
  41.       /* 这里设置的borde必须与父亲中的border宽度一样，才不会出现塌陷 */
  42.       border: 4px solid #3778e5;
  43.     }
  45.     nav img {
  46.       display: block;
  47.       border-radius: 0.6rem;
  48.     }
  49.   </style>