主页 / user-259573

Fresko Gonsaless's questions

Martin Hope
Fresko Gonsaless
Asked: 2020-08-07 23:36:04 +0000 UTC
  • 2

div {
  display: inline-block;
  background: #f3f3f3;
  padding: 25px;
  margin-right: 10px;
  text-align:center
  line-height: 50px;
  font-size: 18px;
  color: red;
}

div:hover {
  border-radius: 5px;
  border: 4px solid #ddd;
  transition: all 0.5s ease;
}
<section>
  <div>HELLO</div>
  <div>HELLO</div>
  <div>HELLO</div>
  <div>HELLO</div>
</section>

问题2：

  1. 悬停时，方块会跳跃。
  2. 在悬停时，过渡将边框从 0px 增加到 3px，但我希望它不增加，但只有边框 c 3px 平滑出现。
css
Martin Hope
Fresko Gonsaless
Asked: 2020-07-21 03:28:46 +0000 UTC
  • 1

标签有一些js代码：

$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
  $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
  $(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");
.wrapper {
  width: 80%;
  border: 3px solid #ececec;
  border-radius: 3px;
  margin:20px;
}

.active {
  text-align: center;
  display: table-cell;
  width: 1%;
  color: #9097a1;
  padding: 15px 0;
  background: #fff;
  font-size: 18px;
}

.tab:not(.active) {
  text-align: center;
  display: table-cell;
  width: 1%;
  color: #abb1ba;
  padding: 15px 0;
  background: #ececec;
  font-size: 18px;
}

.tab_content {
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 1</span>
    <span class="tab">Вкладка 2</span>
    <span class="tab">Вкладка 3</span>
  </div>
  <div class="tab_content">
    <div class="tab_item">Содержимое 1</div>
    <div class="tab_item">Содержимое 2</div>
    <div class="tab_item">Содержимое 3</div>
  </div>
</div>

<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 4</span>
    <span class="tab">Вкладка 5</span>
    <span class="tab">Вкладка 6</span>
  </div>
  <div class="tab_content">
    <div class="tab_item">Содержимое 4</div>
    <div class="tab_item">Содержимое 5</div>
    <div class="tab_item">Содержимое 6</div>
  </div>
</div>

效果很好，但是当站点需要 2 个时。选项卡，脚本无法正常工作。

有可能解决这个问题吗？

javascript