Question

我在引导工作＆＃34;翻转＆＃34;影响。目前我有一个简单的流体网格，里面有图像：

<div class="container">
<div class="row">
<div class="col-md-6 py-0 px-0 mx-0 my-0"><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a></div>

<div class="col-md-6 py-0 px-0 mx-0 my-0" box><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
</div></div>

<div class="row"><div class="col-md-6 py-0 px-0 mx-0 my-0"><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a></div>

<div class="col-md-6 py-0 px-0 mx-0 my-0" box><a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
</div>
</div>

</div>

和一个带有introImgRoll类的简单css：

.introImgRoll:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    border: 5px solid black;

}

.introImgRoll:hover img  {
    margin: -5px;
}

问题：

请查看：Code Pen Example，尤其是当您将鼠标悬停在蓝色框上时，因为图像需要响应（流体类）边框会破坏整个结构。所以我做了一些研究，想要平衡5px边框和图像的-5px边距。不幸的是，它似乎无法正常工作。

我该如何解决这个问题？

Answer 1

.introImgRoll没有img孩子 - ＆gt;它是img。将CSS的最后一部分更改为：

.introImgRoll:hover {
    margin: -5px;
    box-sizing: content-box; /* will solve the problem. */
}

盒子阴影方法：</ strong>

.row a { display: inline-block; position: relative; } .row a:hover::before { content: ""; box-shadow: inset 0 0 0 5px black; top: 0; right: 0; bottom: 0; left: 0; display: block; position: absolute; } .row a:hover img { opacity: 0.5; }

Answer 2

请尝试以下代码。

.introImgRoll:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    border: 5px solid black;
     margin: -5px 0px;

}

.introImgRoll:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  /* For IE8 and earlier */
  border: 5px solid black;
   margin: -5px 0px;
}

.introImgRoll:hover img {
  margin: -5px;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 py-0 px-0 mx-0 my-0">
      <a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
    </div>

    <div class="col-md-6 py-0 px-0 mx-0 my-0" box>
      <a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 py-0 px-0 mx-0 my-0">
      <a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
    </div>

    <div class="col-md-6 py-0 px-0 mx-0 my-0" box>
      <a href="#"><img src="http://placehold.it/900x150" class="img-fluid introImgRoll"></a>
    </div>
  </div>

</div>

在悬停图片时使用margin : -5px 0px;

CSS＆＃34;内部边界＆＃34;：悬停在div上

2 个答案: