0

我在 a 中有一行缩略图<div>，只有一个small margin/border/padding set. 我想添加一个'focus'类以在 CSS 转换期间突出显示页面上的一个缩略图，即'div.thumb.focus'

'div.thumb'是否有任何简单的 CSS 技巧可以在不重新定位页面的情况下将框架包裹起来div.thumb？

div.thumbs 都绝对定位在一个容器中。而且我希望框架比margin/padding中间更厚div.thumb。只要z-index点击事件读取div.thumb.focus. 一个简单的 JQuery 解决方案是可以接受的。

 // using LESS syntax
.container {
   position: relative;

  .thumb {
    &.focus {
       <need help here>
    }
    top: @top;
    left: @left;
    position: absolute;
    margin: @margin;
    padding: @padding;

    img {
      width: @width;
      height: @height;
    }
   }

 }
4

2 回答 2

0

我想到了一些解决方案（不是特定于 Bootstrap 的）：

使用更好的盒子模型，但它可能会影响您的填充：

box-sizing: border-box
border: 10px solid red

或者使用看起来像边框的硬嵌入阴影：

box-shadow: inset 0 0 0 10px red

您可以使用轮廓，但它会溢出框外而不影响其尺寸：

outline: 10px solid red
于 2013-11-08T21:26:59.757 回答
0

现在，我对 LESS 不太熟悉，所以我只是在常规 CSS 中完成了这项工作。

您可以选择几个选项。

添加负边距

.thumb.focus{
    margin-top: -4px;
    margin-left: -4px;
    border: 4px solid blue;
}

但是，这可能不适合您的情况，因为您已经设置了边距。不过，它可能对其他人有用。

添加阴影

.thumb.focus{
    box-shadow: 0 0 0 4px blue; //use inset if you want it inside the thumb
}

这可以很好地工作，但如果你想在某些方面有多种颜色/厚度，那就不行了。

使用盒子大小

.thumb.focus{    
    box-sizing: border-box;
    border: 4px solid blue;
}

这样做的主要问题是浏览器支持。

使用大纲

.thumb.focus{
    outline: 4px solid blue;
}

这与我相信的盒子阴影有类似的问题。

于 2013-11-08T21:31:20.360 回答