3

突出显示是指当您将鼠标拖到文本上时您对文本所做的事情。如果您使用 imgur.com,那么您知道我想要什么。我在任何地方都找不到有关此的任何信息,这令人沮丧。帮助?

编辑:好的,我以为我已经说得够清楚了,但我想不是。我并不是说我想在悬停时更改背景颜色。那是微不足道的。但是你知道当你在页面上有文字的时候,你点击文字并拖动鼠标,或者你按下 ctrl+A,这样背景颜色就会改变,然后你就可以复制文字了?你知道,突出?选择?我不希望它看起来像通过更改背景颜色而发生的那样,我希望它真正发生。在 imgur.com 上上传一张图片,你就会明白我的意思了。请注意,当您将鼠标悬停在上传图像的任何链接上时,文本被选中 - 您可以复制它。

这就是为什么很难找到有关此的任何信息的原因。我得到的只是如何更改背景颜色的结果。

4

7 回答 7

2

您需要将这些答案与 mouseenter 事件结合起来:

function selectElementText(el, win) {
    el.focus();
    win = win || window;
    var doc = win.document, sel, range;
    if (win.getSelection && doc.createRange) {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}
window.onload = function() {
   var element = document.getElementById('TheElementToHighlight');
   element.onmouseover = function(e) {
       e = e || window.event;
       var target = e.target || e.srcElement;
       selectElementText(target);
   };
};

您可以将 jQuery 事件与 selectElementText 函数一起使用,但我不会使用来自其他响应的 jQuery 版本的 selectElementText,因为它使用浏览器嗅探而不是特征检测。

于 2011-04-15T02:10:56.663 回答
1

这可能相关也可能不相关:

CSS:

::-moz-selection{ background: #B2263A; color:#fff; text-shadow: none; }

::selection { background:#B2263A; color:#fff; text-shadow: none; } 

这将改变您的突出显示颜色。

于 2010-10-29T16:57:49.947 回答
0

对于 IE,我认为你仍然可以使用

window.clipboardData.setData('text',text);

(检查 window.clipboardData 属性 - 甚至可能是 typeof window.clipboardDatasetData - 使用前)。

至于 FF,曾经有一个涉及 Flash 的黑客可以用作解决方法,但从 Flash 10 开始,这条路也关闭了。这里有一个 flash-thing 示例的链接,有些人的挫败感似乎因他们的 Flash 版本而异:

http://www.logiclabz.com/javascript/copy-to-clipboard-with-javascript-on-mozilla-firefox-and-ie.aspx

于 2010-03-15T20:44:22.893 回答
-1

使用 css 伪类:hover http://www.w3schools.com/CSS/css_pseudo_classes.asp

于 2010-03-14T22:04:16.340 回答
-1
<style type="text/css">
    .hoverable:hover {
        background-color: yellow;
    }
</style>

<p>This is some regular text, but if you <span class="hoverable">hover over this bit</span> it will get a yellow background.</p>
于 2010-03-14T22:05:00.703 回答
-1
a {
    color: red
}

a:hover {
    color: blue
}

或者你也可以做

#myDiv {
    background-color: red
}

#myDiv:hover {
    background-color: blue
}

看看 IE,它有时会不喜欢你做像第二个例子这样的事情

于 2010-03-14T22:05:17.957 回答
-1

查看悬停时的 jQuery 文档/示例:

http://api.jquery.com/hover/

于 2010-03-14T22:09:08.370 回答