纯CSS方向悬停

一款纯CSS的方向悬停特效，一个有9个方向，每个方向的鼠标悬停显示的样式效果都不同，可以做成酷炫的按钮hover效果或页面背景色改变等效果，喜欢的童鞋请收下吧。

分类：css3 > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需设置好页面元素的样式，代码如下：

.container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-left: 12rem;
  width: 9rem;
  position: relative;
}

.cell {
  flex-basis: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size: 0.5rem;
  color: rgba(0, 0, 0, 0.6);
  z-index: 1;
  cursor: default;
}

.targetContainer {
  z-index: 0;
}

.target {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 1.1rem;
  font-weight: bold;
  border: 1px solid #efefef;
}

.cell:nth-child(1) {
  order: 1;
}

.cell:nth-child(2) {
  order: 2;
}

.cell:nth-child(3) {
  order: 3;
}

.cell:nth-child(4) {
  order: 4;
}

.cell:nth-child(5) {
  order: 6;
}

.cell:nth-child(6) {
  order: 7;
}

.cell:nth-child(7) {
  order: 8;
}

.cell:nth-child(8) {
  order: 9;
}

.cell:nth-child(9) {
  order: 10;
}

.cell:nth-child(9) {
  order: 4;
}

.cell {
  background-color: transparent;
}
.cell.dir:nth-child(1):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(135deg, #ff5f1f 0%, transparent 70%);
}
.cell.dir:nth-child(2):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(180deg, #ff5f1f 0%, transparent 70%);
}
.cell.dir:nth-child(3):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(225deg, #ff5f1f 0%, transparent 70%);
}
.cell.dir:nth-child(4):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(90deg, #ff5f1f 0%, transparent 70%);
}
.cell.dir:nth-child(5):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(270deg, #ff5f1f 0%, transparent 70%);
}
.cell.dir:nth-child(6):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(45deg, #ff5f1f 0%, transparent 70%);
}
.cell.dir:nth-child(7):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(0deg, #ff5f1f 0%, transparent 70%);
}
.cell.dir:nth-child(8):hover ~ .cell.targetContainer .target {
  background-image: linear-gradient(-45deg, #ff5f1f 0%, transparent 70%);
}
.cell .target:hover {
  background-image: radial-gradient(ellipse at center, #ff5f1f 0%, rgba(0, 0, 0, 0) 110%);
}

input {
  margin-top: 9rem;
  margin-left: 12rem;
}

label {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  color: #333;
}

input#dirnum:checked ~ div.container .dir {
  color: transparent;
}

页面的body部分，多个div容器放入不同的方向数字，代码如下：

<input id="dirnum" type="checkbox"/>
<label for="dirnum">隐藏方向数字</label>
<div class="container">
  <div class="cell dir">1</div>
  <div class="cell dir">2</div>
  <div class="cell dir">3</div>
  <div class="cell dir">4</div>
  <div class="cell dir">5</div>
  <div class="cell dir">6</div>
  <div class="cell dir">7</div>
  <div class="cell dir">8</div>
  <div class="cell targetContainer">
    <div class="target">方向悬停</div>
  </div>
</div>