javascript - 如何在不使用 CSS 大纲属性的情况下设置大纲？

Question

我想用 Javascript 和 CSS 设置鼠标悬停元素的轮廓。

在 chrome 中，CSS 大纲属性运行良好，但在 Internet Explorer 中不行（我使用 IE9）。

我测试了 CSS 边框属性，但它减少了实际内容的宽度。

我的目的是在没有 CSS 大纲属性的情况下设置大纲，并且内容的区域没有改变。

该解决方案应支持 IE 7~9，如果还支持 IE6 则最好。

Answer 1

<div>用透明边框将元素包裹在 a中。在鼠标悬停时为边框着色。

如果您不介意内容宽度减少一个常数，即内容宽度不会在鼠标悬停时改变，您可以将透明边框添加到元素本身（以及鼠标悬停时的颜色）。

Answer 2

我测试了 CSS 边框属性，但它减少了实际内容的宽度。

是的，您必须调整布局的其余部分以考虑您引入的 x 像素的边界 - 它会从某个地方占用空间，由您设置适当的尺寸、边距和填充来补偿。