RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
    
    
             Hover me!     

效果如下:

CSS如何判断鼠标进入的方向

我们可以发现,除了右块 之外,都被遮住了,嗯,正常现象。

接下来我们只需要让这几个块退到边缘即可。

代码如下:

.block_hoverer {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.block_hoverer:nth-child(1) {
  background: red;
  top: -90%;
}

.block_hoverer:nth-child(2) {
  background: lime;
  top: 90%;
}

.block_hoverer:nth-child(3) {
  background: orange;
  left: -90%;
}

.block_hoverer:nth-child(4) {
  background: blue;
  left: 90%;
}

效果如下:

CSS如何判断鼠标进入的方向

然后我们加上过渡:

.block_hoverer {
  transition: all 0.3s ease;
}
.block_hoverer:hover {
  opacity: 1;
  top: 0;
  left: 0;
}

效果如下:

CSS如何判断鼠标进入的方向

一步就是隐藏起来:

.block {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 10em;
  height: 10em;
  vertical-align: middle;
}
.block_hoverer {
  opacity: 0;
}
.block_hoverer:hover {
  opacity: 1;
}

效果如下:

CSS如何判断鼠标进入的方向

所以我们有完整代码如下:



    从不同方向使鼠标指针移过下面的内容

    

    →               1
        2
        3
        4
                     Hover me!                    ←     

完整效果可以查看鱼头的codepen

感谢各位的阅读!关于“CSS如何判断鼠标进入的方向”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文名称:CSS如何判断鼠标进入的方向-创新互联
当前网址:http://xdwzjz.cn/article/sheep.html

其他资讯

Top