纯CSS判断鼠标进入的方向代码

CSS代码:

<style>
    body {
        padding: 2em;
        text-align: center;
    }
    .block {
        position: relative;
        display: inline-block;
        overflow:hidden;
        width: 10em;
        height: 10em;
        vertical-align: middle;
        transform: translateZ(0);
    }
    .block_hoverer {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all .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%;
    }
    .block_hoverer:hover {
        opacity: 1;
        top: 0;
        left: 0;
    }

    .block_content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 10em;
        background: #333;
        color: #FFF;
    }
</style>
<body>
    <p class="text">从不同方向使鼠标指针移过下面的内容</p>
    <p>↓</p>
    <span>→ </span>
    <div class="block">
        <div class="block_hoverer">1</div>
        <div class="block_hoverer">2</div>
        <div class="block_hoverer">3</div>
        <div class="block_hoverer">4</div>
        <div class="block_content">
            Hover me!
        </div>
    </div>
    <span> ←</span>
    <p>↑</p>
</body>

 

效果:

纯CSS判断鼠标进入的方向

    A+
发布日期:2020年05月21日 10:07:26  所属分类:HTML
最后更新时间:2020-05-21 10:07:26
头像
  • ¥ 39.0元
  • 市场价:39.0元
  • ¥ 199.0元
  • 市场价:199.0元
  • ¥ 98.0元
  • 市场价:198.0元
  • ¥ 49.9元
  • 市场价:99.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: