有没有一种方法可以将元素放入元素而不是外部？

我正在使用jQuery和CSS。当我为图片使用mouseenter事件（在图片周围放置边框）时，由于外部边框，布局会被调整，这使得它非常难看。我只是想知道是否有办法将边框放在img中，以便img容器保持相同的大小，并且不会影响布局。我能想到的唯一的事情就是调整mouseevent中的图像大小，这看起来像很多工作（确定大小，特别是考虑响应能力），而且我可以看到由此产生的许多问题。有没有一种方法可以将元素放入元素而不是外部？

来源

2013-10-11 Paul Samsotha

其实你不能使用border属性具有元素内部边界，解决方法这是使用box-shadow设置为inset

div { 
    height: 200px; 
    width: 200px; 
    box-shadow: inset 0 0 1px #000; 
}

Demo（这会产生模糊的边界，得到一个不错的坚实的请参考下面的演示）

得到一些更坚固

div { 
    height: 200px; 
    width: 200px; 
    box-shadow: inset -1px 0 0 red, inset 0 -1px 0 red, inset 1px 0 0 red, inset 0 1px 0 red; 
}

Demo

来源

2013-10-11 05:33:56

我必须换行'img'在'div'或者我可以使用'箱shadow'为'img'呢？ –

@peeskillet你需要在之前使用伪命令，用'span'更好地包装图像，使用'padding'，将'span'设置为'inline-block' –

调整填充工作。

#something { 
    padding: 12px; 
} 
#something:hover { 
    padding: 8px; 
    border: 4px solid #FF0000; 
}

box-shadow在旧版浏览器中不受支持。

看到这个JSFiddle。

来源

2013-10-11 05:35:22

您可以使用:after伪元素选择器。

div { 
    height: 200px; 
    width: 200px; 
    position: relative; 
    border: 1px solid grey; 
} 

div:hover:after{ 
    content: ""; 
    position: absolute; 
    left: 1px; 
    right: 1px; 
    top: 1px; 
    bottom: 1px; 
    border: 1px solid green; 
}

Working fiddle

来源

2013-10-11 05:37:20

试试这个 -

<div> 
    <div id="div2"></div> 
</div> 

<style> 
div { 
    height: 200px; 
    width: 200px; 
} 
div#div2:hover { 
    height: 196px; 
    width: 196px; 
    border: 2px solid black; 
} 
</style>

http://jsfiddle.net/ET2De/

来源

2013-10-11 05:55:26

有没有一种方法可以将元素放入元素而不是外部？

回答

相关问题