向活动/非活动类添加带填充的边框答案

【问题标题】：add border with padding to active/non active class向活动/非活动类添加带填充的边框
【发布时间】：2017-02-28 17:41:00
【问题描述】：

我正在努力实现以下目标：我有图像，我需要在img 上使用 1px 黑色和 1px 白色边框来实现一些效果。并且在悬停 3px 边框上单击成为活动类并将悬停更改为 3px 的固定边框。

最好的方法是什么？

我尝试通过在链接上填充 3px 来做到这一点并给出以下内容：

a {
    float:left;
    background-color:white;
    padding:3px;
}

和

img {
    max-width:100%;
    float:left;
}

问题是边框不相等，稍微移动img。此外，当我将所有 UI 悬停时，我需要不透明度 0.5，这对a 造成了问题@

所以我在不影响img的情况下寻找3个带有悬停和活动/非活动边框的最佳解决方案

我的代码是：

<ul>
   <li>
      <div>
          <a class="active">
              <img>
          </a>
      </div>
   </li>
   <li>
      <div>
          <a>
              <img>
          </a>
      </div>
   </li>
</ul>

【问题讨论】：

所以默认情况下，您需要大约 1px 的图像边框，当悬停/单击/活动时，您需要 3px 的边框...这是您正在寻找的吗？
如果您想在边框更改时阻止img 跳跃，请尝试在具有边框的元素上使用box-sizing: border-box。
@Geeky 是的，但图像上还有 1px 的白色边框（2 个固定边框）

标签： html css border

【解决方案1】：

不确定这是否是您的想法，但我希望下面的输出可以帮助您入门。

这里的主要技巧是将您的<img> 放入 3 个 div 中：

最里面的 div 是你的白色边框
中间的 div 是你的黑色边框
最外层的div是透明的1px边框

最后一个是必需的，这样图像就不会移动——因为边框已经存在，并且在您悬停时不必生成。

因此，当您悬停时：外部 div 变为白色，中间 div（之前为黑色）变为白色，最后一个 div 仍然是白色。瞧！悬停时有“3px 纯白色”边框。

为了切换一个会粘住的活动类，那么您将需要 javascript。在这种情况下，我只是继续使用 JQuery。

最后一点：因为我删除了你的<a> 标签，我只是在你最外层的 div 上放了一个cursor:pointer 规则，这样它看起来仍然像你在一个链接上悬停。您可以在您的 javascript onclick 规则中放置您的链接操作。

希望这会有所帮助！

$('.outer').on('click',function(){
   $('.active').removeClass('active');
   $(this).addClass('active');
});

body {
  background:gray;
}

li {
  margin-top:15px;
}
li * {
   transition:all ease 0.3s;
}
li:hover {
   cursor:pointer;
}

.outer {
  border:1px solid transparent;
}

.outer:hover,.outer:hover > .black-border {
  border:1px solid white;
}

.outer:hover img {
   opacity:0.5;
}

.active {
  border:1px solid white;
}

.active > .black-border {
  border:1px solid white;
}

img {
    max-width:100%;
    padding:0;
    margin:0;
    vertical-align:top;
    background-size:cover;
}

.black-border {
  border:1px solid black;

}
.white-border {
  border:1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>
      <div>
          <div class="outer">
          <div class="black-border">
          <div class="white-border">
              <img src="https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg">
          </div>
          </div>
          </div>
      </div>
   </li>
   <li>
      <div>
          <div class="outer">
          <div class="black-border">
          <div class="white-border">
              <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg">
          </div>
          </div>
          </div>
      </div>
   </li>
</ul>

【讨论】：