Думаю будет слабже поддержка браузерами + хочу сделать курсор svg с фильтром, чтобы он менялся при наведении на разные элементы

всем привет. Ребят, я увидел в jest два разных варианта написание тестов, один с помощью test("...",()=> {...}), а другой it("...", ()=> {...}). В чем разница?

Так это гуглится за 5 сек

https://medium.com/@ephreycleophace/learn-how-to-customize-the-cursor-in-vanilla-javascript-and-css-ffbe78be6cf

Возможно я и вправду усложняю задачу, которая выглядит намного проще в реализации ) Спасибо большое! Попробую сейчас такой способ

всем привет, вопрос как сделать схожие ячейки как в этом примере

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

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

Друзья ну я что то уже запутался, необходимо расположить img друг под другом через css

<div id="showing" class="display-in-blocs-edit-mode-only remove-on-export" width="100%" height="100%">
  <img class="pre_face " src="img/placeholder-image.png" width="100%" height="100%" alt="face">
  <img class ="pre_hover" src="img/placeholder-image.png" width="50%" height="50%" alt="hover">
  <img class ="pre_active" src="img/placeholder-image.png" width="10%" height="10%" alt="active">
  <style>
  .showing{
    position: fixed;
      width: 100%;
      height: 100%;
      margin: 20px auto;
      overflow: hidden;
    }

  .pre_face{
    position: relative;
      display: block;
    width=100%; 
    height=100%; 
    z-index: 1;
    clip-path: polygon(0 0, 0 82%, 84% 0);
  }
  .pre_hover{
      display: block;
      position: relative;
      width:100%;
      height:100%;
      border: 1px solid black;
      z-index: 2;
      
  }
  .pre_active{
      display: block;
      position: relative;
      width:100%;
      height:100%;
      z-index: 3;
      
  }
  </style>
<div>

где я лох?

<div id="showing" class="display-in-blocs-edit-mode-only remove-on-export" width="100%" height="100%">
  <img class="pre_face " src="img/placeholder-image.png" width="100%" height="100%" alt="face">
  <img class ="pre_hover" src="img/placeholder-image.png" width="50%" height="50%" alt="hover">
  <img class ="pre_active" src="img/placeholder-image.png" width="10%" height="10%" alt="active">
  <style>
  .showing{
    position: fixed;
      width: 100%;
      height: 100%;
      margin: 20px auto;
      overflow: hidden;
    }

  .pre_face{
    position: relative;
      display: block;
    width=100%; 
    height=100%; 
    z-index: 1;
    clip-path: polygon(0 0, 0 82%, 84% 0);
  }
  .pre_hover{
      display: block;
      position: relative;
      width:100%;
      height:100%;
      border: 1px solid black;
      z-index: 2;
      
  }
  .pre_active{
      display: block;
      position: relative;
      width:100%;
      height:100%;
      z-index: 3;
      
  }
  </style>
<div>

В постановке задачи. CSS такими вещами не занимается

Или я не понял задание

ну бутырброд сделать из img, в одном диве 3 изобращения на разных уровнях

Зачем?

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

normal/hover/active

Ну а зачем тебе 3 картинки?

Сделай спрайт

И двигай его CSSом

не, не подерживает такой функционал редактор

Какой редактор?