1

我在一个<img>元素中有一个<div>元素。每当单击时，我希望整个div（包括图像）缩小 10%（使用变换） 。<div>我已经让它工作了，但是有一个小问题：如果用户单击 div 内的图像，则没有任何反应，而如果用户单击 div 的背景，则div它可以工作。

本质上，当单击 MyDiv 的子项时，如何使:active选择器也起作用。.MyDiv:hover:active { /*scaling logic here*/ }

非常感谢所有帮助，我总是接受答案！

4

1 回答 1

1

:active伪类和div元素

首先，我很确定div元素一开始就不应该有激活状态。

如果我们通读Selectors Level 3 W3C Recommendation的用户操作伪类:hover、:active和:focus部分，我们会发现：

:active伪类在用户激活元素时应用。例如，在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上，:active仅适用于主要或主要激活按钮（通常是“左”鼠标按钮）及其任何别名。

现在，如果我们转到HTML5 W3C Editor's Draft的交互式内容部分，我们会发现：

HTML 中的某些元素具有激活行为，这意味着用户可以激活它们。

用户代理应该允许用户手动触发具有激活行为的元素，例如使用键盘或语音输入，或者通过鼠标点击。当用户以非单击方式触发具有已定义激活行为的元素时，交互事件的默认操作必须是在元素上运行合成单击激活步骤。

我提到 HTML5 Editor's Draft 而不是 HTML401 Recommendation，因为 HTML401 文档没有详细介绍激活状态或用户交互。然而，它确实提到了对元素等a元素的激活，但在定义元素时没有提到任何关于它的div内容。

该div元素 没有HTML5 建议中定义的“激活状态”。它没有Interactive Content类别（与elementa不同）并且没有声明可以对其应用活动状态。

一种解决方法

如上所述，div元素不应接受:active状态。出于这个原因，我将修改 HTML 以使用一个元素。为此，我使用了以下a元素：

<a href="javascript: void(0)">
    <img />
</a>

现在，仅此一项并不能解决 IE 问题。如果您看到这个 JSFiddle 示例，当单击img元素时，a容器不会处于活动状态。那么我们能做些什么来解决这个问题呢？除了使用之外:hover:active，我还将使用:hover:focus：

a:hover:active,
a:hover:focus {
    outline: 0; /* Reset the default anchor tag focus style. */
    background: #f00;
}

这在 IE 和所有其他浏览器上为我们提供了类似的功能，如JSFiddle 演示中所示。

两个（可能不受欢迎的）副作用

  1. 这种方法的问题是元素将保持其焦点状态，您现在可以通过使用键盘的tab键访问元素来实现此效果。每当您将鼠标悬停在处于焦点状态的元素上时，其样式都会发生变化。但是，这不是由我来决定是否是不良副作用。

  2. 您的元素现在是一个链接。href为了使元素首先获得焦点，该属性是必需的。

额外的造型

由于我们现在使用的是a元素而不是div元素，因此我们需要重置任何将您的元素区分为链接的浏览器默认样式。为此，我们可以简单地：

a {
    color: #000; /* Reset the color to black. */
    cursor: default; /* Reset the cursor to default. */
    text-decoration: none; /* Remove the underline. */
}

a img {
    border: none; /* Remove border from image. */
}

最终的 JSFiddle 演示。

于 2013-10-24T10:46:15.623 回答