对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?

我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。

有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?


当前回答

这种突出效果是由于所谓的Hover(onMouseHover)的行动。

当你在任何选项卡上滑动时,它的颜色将被更改。

比如说,

HTML 代码

<div class="menu">
    <ul class="effect">
        <li>Questions</li>
        <li>JOBS</li>
        <li>Users</li>
    </ul>
</div>

CSS 代码

.effect:hover {
    color: none;
}

你可以使用任何颜色,如果你想得到它突出,否则你不能使用任何颜色。

其他回答

我看到很多详细的答案,但我认为写这个代码线应该足以完成所需的任务:

*{
    -webkit-user-select: none;
 }

假设有两种类似的DIV:

.second { cursor: default; user-select: none; -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ -webkit-touch-callout: none; /* iOS Safari */ } <div class="first"> 这是我的第一个 div </div> <div class="second"> 这是我的第二个 div </div>

设置默认的路由器,以便它给用户一个不可选择的感觉。

预定必须用于支持它在所有浏览器. 没有预定,这可能不会在所有答案工作。

关于 WebKit 的文章:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

我在 CardFlip 例子中发现了它。

使用SASS(SCSS合成)

你可以用混合物做到这一点:

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

在HTML标签中:

<div class="no-selectable">TRY TO HIGHLIGHT. YOU CANNOT!</div>

在这个 CodePen 中尝试一下。

如果您正在使用 Autoprefixer,您可以删除其他预定。

浏览器兼容性在这里

.hidden:after { 内容: attr(data-txt); } <p class="hidden" data-txt="某些文本你不想被选中"></p>

然而,这不是最好的方式。