Интервьюер: Вы можете определить направление мыши, чтобы ввести его с помощью чистого CSS?

• Автор: Чен Даютоу
• гитхаб:KRISACHAN

предисловие

В предыдущей группе по передовым технологиям друг группы сказал, что он столкнулся с проблемой во время интервью, то есть интервьюер попросил его использовать чистый CSS для реализации DEMO, который чувствует направление движения объекта в соответствии с движением мыши. позиция.

Данная исходная структура выглядит следующим образом:

<style>
body {
    padding: 2em;
    text-align: center;
}
.block {
    position: relative;
    display: inline-block;
    width: 10em;
    height: 10em;
    vertical-align: middle;
}

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

Схема эффекта выглядит следующим образом:

выполнить

Jinghui задает такого рода вопрос, который не практичен и не имеет ничего общего с бизнесом, и дрожит и холодит, когда же действительно встанет передняя часть Китая.

Спасибо, интервьюер, за хороший вопрос, я постараюсь, чтобы это произошло.

Так можно ли реализовать эту функцию на чистом CSS?

Ответ - да, прежде всего, давайте разберем идею.

CSS-события мыши

Во-первых, из основы вопроса мы знаем, что этот вопрос требует работы с мышью.В JS у нас есть различныеmouseсобытия, но опять же, CSS у нас тоже есть:hover.

Селектор, который нам нужно использовать в этом вопросе,:hoverохватывать

Судя по направлению

Судя по направлениюФункция является ядром этой проблемы.

Судя по названию карты, она на самом деле дала нам направление, которое говорит нам, что мышь должна войти в направлении четырех стрелок.

Если вы хотите, то это чистый CSS, чтобы добиться того, что мы должны прикоснуться мышью к ключевому узлу, и узел должен продемонстрировать, что это представитель этой ориентации.

Это два скрытых условия, приведенные в заголовке.

Итак, попробуем реализовать.

сначала через:hoverЧтобы коснуться этого ключевого узла и коснуться триггера в направлении, указанном стрелкой, мы можем добавить объект, которого можно коснуться в направлении, указанном стрелкой, например:

<style>
.block_hoverer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.block_hoverer:nth-child(1) {
    background: red;
}

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

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

.block_hoverer:nth-child(4) {
    background: blue;
}
</style>
<div class="block">
    <div class="block_hoverer">上</div>
    <div class="block_hoverer">下</div>
    <div class="block_hoverer">左</div>
    <div class="block_hoverer">右</div>
    <div class="block_content">
        Hover me!
    </div>
</div>

Эффект следующий:

Мы можем обнаружить, что помимоправый блокКроме этого, все покрыто, гм, это нормально.

Далее нам просто нужно вернуть эти блоки к краю.

код показывает, как показано ниже:

.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%;
}

Эффект следующий:

Затем добавляем переходы:

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

Эффект следующий:

Один шаг — скрыть:

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

Эффект следующий:

Итак, у нас есть полный код:

<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>

Полный эффект можно увидеть в рыбьей головеcodepen

Хотя мягкого использования нет, этого должно быть достаточно, чтобы иметь дело с интервьюером.

Благодаря вопросам, заданным интервьюером, я понял эту функцию и получил более глубокое понимание CSS.

постскриптум

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95