html - 宽度为 :0; height:0; 的可悬停元素

Question

我正在尝试制作一个元素，允许用户选择一个区域，然后选择一个单选按钮(隐藏)。问题是可选择的区域需要是三 Angular 形，因此我使用了以下代码来创建一个向下的三 Angular 形，

width: 0; 
height: 0; 
border-left: 26px solid transparent;
border-right: 26px solid transparent;
position:absolute;
top:-1px;
right:1px;
border-top: 26px solid green;

我现在的问题是它不会执行任何悬停行为或 :checked 行为，我假设这是因为元素理论上没有维度？有解决办法吗？基本上我想要发生的是当三 Angular 形悬停时它变成灰色，当它被点击时它变成黄色并且兄弟 radio 被选中。这是我的 fiddle ，我有中心(圆圈工作)。

http://jsfiddle.net/bfehyv2a/1/

Answer 1

尝试 http://jsfiddle.net/bfehyv2a/4/

您会看到 :hover 仍然有效，因为当指针位于元素边框上时，指针被认为位于元素上方。

.green .long:hover {
    border-top-color: #888;
}

另外，请注意使用了 border-top-color，因为这是您设置颜色以创建三 Angular 形的唯一边框。

至于 :checked 状态，这仅适用于单选按钮本身，并且由于三 Angular 形不在其中，您将无法使用它来设置那里的颜色。您将不得不使用 JavaScript 来设置状态类，这是您无论如何都应该做的事情，因为它可以更好地分离关注点。