当前位置：文江博客话题详情

jQuery UI 是否缺少状态？

发布于 2024-07-13 07:02:33 字数 191 浏览 15 评论 0原文

jQuery UI 小部件似乎具有非活动、活动和悬停状态，但缺少按下（单击并按住）状态。这是一个疏忽吗？我能想到的几乎所有现代 UI 都处于抑郁状态。有人添加过这样的状态吗？如果是这样，您必须接触哪些代码？

编辑：我应该说的是悬停和点击状态看起来是一样的。应该有另一种状态，以便您可以在悬停后看到您已单击。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦初启 2024-07-20 07:02:33

在 HTML/CSS 中，活动状态适用于“当用户激活元素时。例如，在用户按下鼠标按钮和释放鼠标按钮之间”。（CSS 2.1 部分 5.11.3）如果是按钮，则为按下状态。

我只是假设这也适用于 jQuery UI。

回复收藏 0 原文

苹果你个爱泡泡 2024-07-20 07:02:33

不要忘记，在 CSS 中，您可以组合伪选择器：

a:link {
    color: blue;
}
a:hover {
    color: green;
}
a:visited {
    color: purple;
}
a:active {
    /* link is active */
    color: red;
}
a:visited:hover {
    /* hovering on a visited link */
    color: pink;
}
a:active:hover {
    /* hovering on an active link */
    color: black;
}
a:visited:active:hover {
    color: fuchsia;
}

a:active 和 a:active:hover 之间有明显的区别：链接可以变成使用键盘按 Tab 键即可激活。虽然它不是 100% 万无一失，但活动和悬停的状态表明用户已按下该链接。改变边框样式会给你想要的效果。唯一的错误是，如果链接变为活动状态，然后用户将鼠标悬停在其上而不单击，它仍然会被抑制。

试试这个 CSS 看看我的意思：

a {
    padding: 5px 10px;
    background-color: gray;
    border-color: gray;
    border-style: outset;
}
a:active:hover {
    border-style: inset;
}

Don't forget that in your CSS, you can combine the pseudo-selectors:

a:link {
    color: blue;
}
a:hover {
    color: green;
}
a:visited {
    color: purple;
}
a:active {
    /* link is active */
    color: red;
}
a:visited:hover {
    /* hovering on a visited link */
    color: pink;
}
a:active:hover {
    /* hovering on an active link */
    color: black;
}
a:visited:active:hover {
    color: fuchsia;
}

There's a definite difference between a:active and a:active:hover : a link can become active by tabbing to it using the keyboard. Though it's not 100% foolproof, the state of being active and hovered would suggest that the user has the link depressed. Altering the border style would give you the desired effect. The only bug in this is if the link becomes active and then the user hovers over it without clicking, it'll still go depressed.

Try this CSS to see what I mean:

a {
    padding: 5px 10px;
    background-color: gray;
    border-color: gray;
    border-style: outset;
}
a:active:hover {
    border-style: inset;
}

回复收藏 0 原文