Question

我正在尝试创建一个允许用户选择区域的元素，然后选择一个单选按钮（隐藏）。问题是可选择的区域需要是三角形，因此我使用下面的代码来创建向下指向的三角形，

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;

我现在的问题是它不会做任何悬停行为或：检查行为，我认为这是因为元素理论上没有维度？有没有解决这个问题？基本上我想要发生的是当三角形悬停时它变成灰色，当它被点击它变成黄色并检查兄弟收音机。这是我的小提琴，我有中心（圆圈工作）。

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

Answer 1

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

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

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

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

至于：选中状态，这仅适用于单选按钮本身，因为三角形不在此范围内，您将无法使用此设置颜色。您将不得不使用JavaScript来设置状态类，这是您应该真正做的事情，因为它是一个更好的关注点分离。

宽度为0的可暂停元素;高度：0;

1 个答案: