JQuery вопрос скрытия элемента для нескольких элементов - PullRequest
Новая
       43

JQuery вопрос скрытия элемента для нескольких элементов

0 голосов
/ 02 ноября 2019

Пожалуйста, рассмотрите фрагмент ниже. 

$(document).ready(function(){
 $(".like-btn").hover(function() {
  var rowid = $(this).attr("data-rowid");
  $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() {
    $(".reaction-icon").each(function(i, e) {
      setTimeout(function(){
        $(e).addClass("shows");
      }, i * 100);
    });
  });
}, function() {
  var rowid = $(".like-btn").attr("data-rowid");
  setTimeout(function(){
    $(".reaction-box[data-rowid='" + rowid + "']").fadeOut(300, function(){
      $(".reaction-icon").removeClass("shows")
    })
  }, 500);
});
});
.feed .like-btn {
        width: 44px;
        height: 25px;
        background: #D0D0D0;
        position: absolute;
        bottom: 13px;
        left: 13%;
        top: 10%;
        cursor: pointer;
      }
      .feed .like-btn::before {
        content: ".";
        opacity: 0;
        display: block;
        width: 44px;
        height: 10px;
        position: absolute;
        top: -10px;
        left: 0;
      }
      .feed .like-btn .reaction-box {
        position: absolute;
        width: 155px;
        height: 55px;
        background: #FFF;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        border-radius: 28px;
        left: -25px;
        bottom: 35px;
        display: none;
      }
      .feed .like-btn .reaction-box .reaction-icon.angry {
        animation: fadeInLoad-angry 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px 0px;
      }
      .feed .like-btn .reaction-box .reaction-icon.flower {
        animation: fadeInLoad-flower 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -40px;
      }
      .feed .like-btn .reaction-box .reaction-icon.haha {
        animation: fadeInLoad-haha 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -80px;
      }
      .feed .like-btn .reaction-box .reaction-icon.like {
        animation: fadeInLoad-like 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -120px;
      }
      .feed .like-btn .reaction-box .reaction-icon.love {
        animation: fadeInLoad-love 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -160px;
      }
      .feed .like-btn .reaction-box .reaction-icon.sad {
        animation: fadeInLoad-sad 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -200px;
      }
      .feed .like-btn .reaction-box .reaction-icon.wow {
        animation: fadeInLoad-wow 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -240px;
      }
      .feed .like-btn .reaction-box .reaction-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url(data:image/png;base64,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);
        background-size: cover;
        border-radius: 20px;
        margin: 8px -1px 0 8px;
        text-align: center;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        opacity: 0;
        transform: translate(0, 100px) scale(0);
      }
      .feed .like-btn .reaction-box .reaction-icon label {
        padding: 3px 5px 3px 5px;
        position: relative;
        top: -24px;
        border-radius: 10px;
        font-size: 11px;
        color: #FFF;
        background: #333;
        visibility: hidden;
      }
      .feed .like-btn .reaction-box .reaction-icon.shows {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        pointer-events: auto;
      }
      .feed .like-btn .reaction-box .reaction-icon:hover {
        transform: scale(1.4);
        transform-origin: bottom;
      }
      .feed .like-btn .reaction-box .reaction-icon:hover label {
        visibility: visible;
      }
      .feed .like-btn:hover {
        background: #718C00;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feed">
  <a class="like-btn" data-rowid="1"> Hover
    <div class="reaction-box" data-rowid="1">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover
    <div class="reaction-box" data-rowid="2">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover
    <div class="reaction-box" data-rowid="3">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover
    <div class="reaction-box" data-rowid="4">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  </div>

Как видите, у этого фрагмента есть несколько проблем. Когда вы наводите курсор на одну кнопку, вы видите, что реакции всплывают, но затем они не исчезают и не прячутся, когда курсор отводится от кнопки. Когда вы наводите 2-3 из них сразу, и все реакции отображаются повторно, наведите еще одну кнопку, и анимация воспроизводится и для других блоков реакции. Все должно быть просто. Наведите на одну кнопку, и реакция всплывает на это, парить, и он прячется. Вот и все. Так же, как Facebook. Кроме того, на мобильных устройствах он отображается при нажатии, но как сделать так, чтобы он отображался при нажатии кнопки (например, в Facebook).

Ответы [ 4 ]

0 голосов
/ 03 ноября 2019

Может быть лучше использовать this в вашем селекторе, чтобы сделать его менее сложным. Например, $(".reaction-box", this) выберет элемент с этим классом в пределах this. Точно так же вы можете сделать $(this).find(".reaction-box"), и он будет иметь тот же эффект.

Рабочий пример: 

$(function() {
  $(".like-btn").hover(function(e) {
    $(".reaction-box", this).fadeIn(100, function() {
      $(".reaction-icon", this).each(function(i, e) {
        setTimeout(function() {
          $(e).addClass("shows");
        }, i * 100);
      });
    });
  }, function(e) {
    $(".reaction-box", this).fadeOut(800, function() {
      $(".reaction-icon", this).removeClass("shows")
    });
  });
});
.feed .like-btn {
  width: 44px;
  height: 25px;
  background: #D0D0D0;
  position: absolute;
  bottom: 13px;
  left: 13%;
  top: 10%;
  cursor: pointer;
}

.feed .like-btn::before {
  content: ".";
  opacity: 0;
  display: block;
  width: 44px;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
}

.feed .like-btn .reaction-box {
  position: absolute;
  width: 155px;
  height: 55px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 28px;
  left: -25px;
  bottom: 35px;
  display: none;
}

.feed .like-btn .reaction-box .reaction-icon.angry {
  animation: fadeInLoad-angry 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px 0px;
}

.feed .like-btn .reaction-box .reaction-icon.flower {
  animation: fadeInLoad-flower 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -40px;
}

.feed .like-btn .reaction-box .reaction-icon.haha {
  animation: fadeInLoad-haha 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -80px;
}

.feed .like-btn .reaction-box .reaction-icon.like {
  animation: fadeInLoad-like 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -120px;
}

.feed .like-btn .reaction-box .reaction-icon.love {
  animation: fadeInLoad-love 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -160px;
}

.feed .like-btn .reaction-box .reaction-icon.sad {
  animation: fadeInLoad-sad 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -200px;
}

.feed .like-btn .reaction-box .reaction-icon.wow {
  animation: fadeInLoad-wow 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -240px;
}

.feed .like-btn .reaction-box .reaction-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(data:image/png;base64,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);
  background-size: cover;
  border-radius: 20px;
  margin: 8px -1px 0 8px;
  text-align: center;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translate(0, 100px) scale(0);
}

.feed .like-btn .reaction-box .reaction-icon label {
  padding: 3px 5px 3px 5px;
  position: relative;
  top: -24px;
  border-radius: 10px;
  font-size: 11px;
  color: #FFF;
  background: #333;
  visibility: hidden;
}

.feed .like-btn .reaction-box .reaction-icon.shows {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}

.feed .like-btn .reaction-box .reaction-icon:hover {
  transform: scale(1.4);
  transform-origin: bottom;
}

.feed .like-btn .reaction-box .reaction-icon:hover label {
  visibility: visible;
}

.feed .like-btn:hover {
  background: #718C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feed">
  <a class="like-btn" data-rowid="1"> Hover
    <div class="reaction-box" data-rowid="1">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover
    <div class="reaction-box" data-rowid="2">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover
    <div class="reaction-box" data-rowid="3">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover
    <div class="reaction-box" data-rowid="4">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
</div>
0 голосов
/ 02 ноября 2019

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

.feed .like-btn {
  width: 44px;
  height: 25px;
  background: #D0D0D0;
  position: absolute;
  bottom: 13px;
  left: 13%;
  top: 10%;
  cursor: pointer;
}

.feed .like-btn::before {
  content: ".";
  opacity: 0;
  display: block;
  width: 44px;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
}

.feed .like-btn .reaction-box {
  position: absolute;
  width: 155px;
  height: 55px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 28px;
  left: -25px;
  bottom: 35px;
  display: none;
}

.feed .like-btn .reaction-box .reaction-icon.angry {
  animation: fadeInLoad-angry 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px 0px;
}

.feed .like-btn .reaction-box .reaction-icon.flower {
  animation: fadeInLoad-flower 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -40px;
}

.feed .like-btn .reaction-box .reaction-icon.haha {
  animation: fadeInLoad-haha 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -80px;
}

.feed .like-btn .reaction-box .reaction-icon.like {
  animation: fadeInLoad-like 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -120px;
}

.feed .like-btn .reaction-box .reaction-icon.love {
  animation: fadeInLoad-love 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -160px;
}

.feed .like-btn .reaction-box .reaction-icon.sad {
  animation: fadeInLoad-sad 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -200px;
}

.feed .like-btn .reaction-box .reaction-icon.wow {
  animation: fadeInLoad-wow 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -240px;
}

.feed .like-btn .reaction-box .reaction-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(data:image/png;base64,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);
  background-size: cover;
  border-radius: 20px;
  margin: 8px -1px 0 8px;
  text-align: center;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translate(0, 100px) scale(0);
}

.feed .like-btn .reaction-box .reaction-icon label {
  padding: 3px 5px 3px 5px;
  position: relative;
  top: -24px;
  border-radius: 10px;
  font-size: 11px;
  color: #FFF;
  background: #333;
  visibility: hidden;
}

.feed .like-btn .reaction-box .reaction-icon.shows {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}

.feed .like-btn .reaction-box .reaction-icon:hover {
  transform: scale(1.4);
  transform-origin: bottom;
}

.feed .like-btn .reaction-box .reaction-icon:hover label {
  visibility: visible;
}

.feed .like-btn:hover {
  background: #718C00;
}

.like-btn:hover .reaction-box{
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feed">
  <a class="like-btn" data-rowid="1"> Hover
    <div class="reaction-box" data-rowid="1">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover
    <div class="reaction-box" data-rowid="2">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover
    <div class="reaction-box" data-rowid="3">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover
    <div class="reaction-box" data-rowid="4">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
</div>
0 голосов
/ 02 ноября 2019

Может быть, вы можете попробовать обновить свой jquery, используя этот скрипт: 

$(document).ready(function(){
 $(".like-btn").each(function(){
    $(this).on({
    'mouseenter': function(e) {
        e.preventDefault();
        $(this).find(".reaction-box").fadeIn(100, function(){

             $(this).find(".reaction-icon").each(function(i, e) {
            setTimeout(function(){
              $(e).addClass("shows");
            }, i * 100);
          });


            }
            )
 },
      'mouseleave': function(e){
            e.preventDefault();
          var el;
            $(this).find(".reaction-icon").each(function(i, e) {
            if(i == 0){
                el = $(this).closest('.reaction-box').attr('data-rowid');
            }
            setTimeout(function(){
              $(e).removeClass("shows");
            }, i * 100);
          });

           setTimeout(function(){
            $('.reaction-box[data-rowid="' + el + '"]').fadeOut(50);
          }, 400);
         }
});
});
});

как эта скрипка jsfiddle

0 голосов
/ 02 ноября 2019

rowid для fadeout с использованием var rowid = $(".like-btn").attr("data-rowid"); всегда будет возвращать 1, поскольку вы явно ссылаетесь на .like-btn. Вместо этого вам нужно изменить как var rowid = $(this).attr("data-rowid");, что приведет к извлечению идентификатора строки. 

$(document).ready(function() {
  $(".like-btn").hover(function() {
    var rowid = $(this).attr("data-rowid");
    $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() {
      $(".reaction-icon").each(function(i, e) {
        setTimeout(function() {
          $(e).addClass("shows");
        }, i * 100);
      });
    });
  }, function() {
    var rowid = $(this).attr("data-rowid");
    setTimeout(function() {
      $(".reaction-box[data-rowid='" + rowid + "']").fadeOut(300, function() {
        $(".reaction-icon").removeClass("shows")
      })
    }, 500);
  });
});
.feed .like-btn {
  width: 44px;
  height: 25px;
  background: #D0D0D0;
  position: absolute;
  bottom: 13px;
  left: 13%;
  top: 10%;
  cursor: pointer;
}

.feed .like-btn::before {
  content: ".";
  opacity: 0;
  display: block;
  width: 44px;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
}

.feed .like-btn .reaction-box {
  position: absolute;
  width: 155px;
  height: 55px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 28px;
  left: -25px;
  bottom: 35px;
  display: none;
}

.feed .like-btn .reaction-box .reaction-icon.angry {
  animation: fadeInLoad-angry 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px 0px;
}

.feed .like-btn .reaction-box .reaction-icon.flower {
  animation: fadeInLoad-flower 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -40px;
}

.feed .like-btn .reaction-box .reaction-icon.haha {
  animation: fadeInLoad-haha 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -80px;
}

.feed .like-btn .reaction-box .reaction-icon.like {
  animation: fadeInLoad-like 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -120px;
}

.feed .like-btn .reaction-box .reaction-icon.love {
  animation: fadeInLoad-love 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -160px;
}

.feed .like-btn .reaction-box .reaction-icon.sad {
  animation: fadeInLoad-sad 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -200px;
}

.feed .like-btn .reaction-box .reaction-icon.wow {
  animation: fadeInLoad-wow 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px -240px;
}

.feed .like-btn .reaction-box .reaction-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(data:image/png;base64,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);
  background-size: cover;
  border-radius: 20px;
  margin: 8px -1px 0 8px;
  text-align: center;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translate(0, 100px) scale(0);
}

.feed .like-btn .reaction-box .reaction-icon label {
  padding: 3px 5px 3px 5px;
  position: relative;
  top: -24px;
  border-radius: 10px;
  font-size: 11px;
  color: #FFF;
  background: #333;
  visibility: hidden;
}

.feed .like-btn .reaction-box .reaction-icon.shows {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}

.feed .like-btn .reaction-box .reaction-icon:hover {
  transform: scale(1.4);
  transform-origin: bottom;
}

.feed .like-btn .reaction-box .reaction-icon:hover label {
  visibility: visible;
}

.feed .like-btn:hover {
  background: #718C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feed">
  <a class="like-btn" data-rowid="1"> Hover
    <div class="reaction-box" data-rowid="1">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover
    <div class="reaction-box" data-rowid="2">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover
    <div class="reaction-box" data-rowid="3">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover
    <div class="reaction-box" data-rowid="4">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...