这种突出效果是由于所谓的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;
}

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

将一个类添加到您的 CSS 定义你不能选择或突出一个元素。

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>

这在某些浏览器中工作:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

简单地将您所需的元素/ID 添加到由无空间的 commas 分开的选择器前面,如下:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

其他答案是更好的;这可能应该被视为最后的避难所 / 冲突。

使用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,您可以删除其他预定。

浏览器兼容性在这里

我喜欢Hybrid CSS + jQuery 解决方案。

要使 <div class="draggable"></div> 中的所有元素不可选择,请使用此 CSS:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

然后,如果您正在使用 jQuery,请将其添加到 $(文件)。ready() 区块中:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

我猜你仍然想要任何输入元素是互动的,因此 :not() pseudo-selector. 你可以使用“*”而不是如果你不在乎。

Caveat: Internet Explorer 9 可能不需要此额外的 jQuery 件,所以您可能想在那里添加一个版本检查。

试着使用这个:

::selection {
    background: transparent;
}

如果您想指定不在特定元素中选择,则只需在选择规则之前设置元素类或ID,例如:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}