Question

通过突出显示我的意思是当你将鼠标拖到它上面时对文本做的事情。如果您使用imgur.com，那么您就知道我想要什么。我在任何地方都找不到任何相关的东西，令人沮丧。帮助

编辑：好的，我认为我已经说清楚了，但我猜不是。我不意味着我想在悬停时更改背景颜色。那是微不足道的。但是你知道当你在页面上有文本，然后你点击文本并拖动鼠标，或者你点击ctrl + A，这样背景颜色会改变，然后你可以复制文本？你知道吗，突出显示？选择？我不希望它通过改变背景颜色来看，我希望它实际发生。在imgur.com上传图像你会明白了吗。请注意，当您将鼠标悬停在上传图片的任何链接上时，文本会被选中 - 您可以复制它。

这就是为什么很难找到这个的原因。我得到的是如何更改背景颜色的结果。

Answer 1

您需要将these answers与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函数一起使用，但我不会使用其他响应中的selectElementText的jQuery版本，因为它使用浏览器嗅探而不是功能检测。

Answer 2

这可能相关也可能不相关：

CSS：

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

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

这会改变您的高光颜色。

Answer 3

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

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

（检查window.clipboardData属性 - 甚至可能是window.clipboardDatasetData的类型 - 在使用之前）。

至于FF，曾经有一个涉及闪存的黑客可以用作解决方法，但从Flash 10开始，这条路也被关闭了。这里有一个关于flash-thing的例子的链接，有些人的挫折感似乎与他们的Flash版本有所不同：

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

Answer 4

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

Answer 5

<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>

Answer 6

a {
    color: red
}

a:hover {
    color: blue
}

或者您也可以

#myDiv {
    background-color: red
}

#myDiv:hover {
    background-color: blue
}

只是看IE，它有时会对你做第二个例子

的事情感到沮丧

Answer 7

查看hover上的jQuery文档/示例：

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

如何在悬停时突出显示文字

7 个答案: