Question

我试图实现以下目标：我有图像，我需要img上的边框1px黑色和1px白色来实现一些效果。并且在点击时将鼠标悬停在3px边框上变为活动类并将悬停更改为3px的固定边框。

最好的方法是什么？

我尝试在链接上填充3px 并给出了以下内容：

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

和

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

问题在于边界不相等而且稍微移动了img。此外，当我将所有用户界面悬停时，我需要不透明度为0.5，并且它会导致a

出现问题

所以我寻找3个边界的最佳解决方案，悬停和主动/非主动，而不影响img

我的代码是：

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

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

使用填充添加边框到活动/非活动类

1 个答案: