hover的事件功能演示

纯css实现事件绑定

默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式，被改变的元素必须是被hover元素的子元素，但你现在container和wrap不是父子关系，而是兄弟关系，那么你必须要这样设置了。

.container:hover +.wrap{
    background: red;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="./css/ex.css">
  </head>
  <body>
    <div class="box-all">
      <div class="box">首页</div>
      <div class="box">作品</div>
      <div class="box box3">更多</div>
      <div class="box-pull">
        <div class="box2">github</div>
        <div class="box2">知乎</div>
        <div class="box2">微博</div>
      </div>
    </div>
  </body>
</html>

css:

.box-all{
  width: 600px;
  margin:0 auto;
  position: relative;
  box-shadow: 2px 2px 8px #999;
  border-radius: 5px;
}
.box-all:after{
  display: block;
  content: "";
  clear: both;
}
.box{
  float:left;
  width: 70px;
  height: 35px;
  text-align: center;
  line-height: 35px;
}
.box:hover{
  background-color: #999;
}
.box2:hover{
  background-color: green;
}

.box-pull{
  position: absolute;
  top: 37px;
  left: 143px;
  height: 100px;
  width: 150px;
  display: none;
}
.box2{
  height: 33px;
  line-height: 33px;
  padding-left: 10px;
  box-shadow: 2px 2px 8px #999;

}

.box-all>div:hover +.box-pull{
  display: block;
}

最后编辑于：2017.12.08 05:27:43

hover的事件功能演示

推荐阅读更多精彩内容