纯CSS的创意问答鼠标悬停特效

一款纯CSS的创意问答鼠标悬停特效，鼠标悬停在不同的文字时，最上面的布局示例会有不同的图样显示，同时悬停位置的文字也会有一个蓝色高亮的突出效果，整体效果非常的漂亮大气，喜欢的童鞋请收下吧。

分类：选项卡/滑动门 > 列表切换难易：初级

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

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了多个div的嵌套结构，不算很复杂，代码如下：

<div class="demo">
  <div class="demo__content">
    <h2 class="demo__heading">你喜欢什么样的页面布局呢？</h2>
    <div class="demo__elems">
      <div class="demo__elem demo__elem-1">简约的多文字布局</div>
      <div class="demo__elem demo__elem-2">一列的图文混排布局</div>
      <div class="demo__elem demo__elem-3">两列的图文混排布局</div>
      <span class="demo__hover demo__hover-1"></span>
      <span class="demo__hover demo__hover-2"></span>
      <span class="demo__hover demo__hover-3"></span>
      <div class="demo__highlighter">
        <div class="demo__elems">
          <div class="demo__elem">简约的多文字布局</div>
          <div class="demo__elem">一列的图文混排布局</div>
          <div class="demo__elem">两列的图文混排布局</div>
        </div>
      </div>
      <div class="demo__examples">
        <div class="demo__examples-nb">
          <div class="nb-inner">
            <div class="example example-adv">
              <div class="example-adv">
                <div class="example-adv__top">
                  <div class="example-adv__top-search"></div>
                </div>
                <div class="example-adv__mid"></div>
                <div class="example-adv__line"></div>
                <div class="example-adv__line long"></div>
              </div>
            </div>
            <div class="example example-web">
              <div class="example-web__top"></div>
              <div class="example-web__left"></div>
              <div class="example-web__right">
                <div class="example-web__right-line"></div>
                <div class="example-web__right-line"></div>
                <div class="example-web__right-line"></div>
                <div class="example-web__right-line"></div>
                <div class="example-web__right-line"></div>
                <div class="example-web__right-line"></div>
              </div>
            </div>
            <div class="example example-both">
              <div class="example-both__half example-both__left">
                <div class="example-both__left-top"></div>
                <div class="example-both__left-mid"></div>
              </div>
              <div class="example-both__half example-both__right">
                <div class="example-both__right-top"></div>
                <div class="example-both__right-mid"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

纯CSS的创意问答鼠标悬停特效【原创】

页面的head部分，需引入页面的样式文件，代码如下：

页面的body部分，用了多个div的嵌套结构，不算很复杂，代码如下：