css - 制作 :active work at the children node in IE

Question

HTML:

<div class="productCss">
    <figure>
        <img src="pic/products/pullet00001.png" alt="this is a picture">
        <figcaption>some product word2</figcaption>
    </figure>
</div>

CSS:

.productCss {
    border: black 1px solid;
}

.productCss:hover {
    border: blue 2px solid;
    cursor: pointer;
}

.productCss:active {
    border: blue 3px solid;
    cursor: pointer;
}

Demo

这个问题只在IE中出现。

当我的光标移入并在空白处按下鼠标时，IE 确实可以像其他浏览器一样完美地工作。

但是，如果我在 or 区域上按下鼠标，IE 不会像 productCss:active 那样将边框更改为 3px。

我可以只使用 css 解决这个问题吗？

Answer 1

情况一:.productCss被边缘点击

• 它适用于 IE 和其他浏览器。 :active 状态为真

情况 2:点击图形

为了强调，我们设置了 figure { border: 1px solid red; }

• 它适用于其他浏览器。 :active 状态为真
• 它在 IE 中不起作用。

这是为什么？我猜 IE 的行为如下:我们不点击 .productCss，而是点击 figure。因此只有 figure 有 :active 状态，父 div 没有。