如何在鼠标悬停时突出显示文本

Question

如何在鼠标悬停时突出显示文本

5

我所说的“highlight”是指当您用鼠标拖动文本时所做的操作。如果您使用imgur.com，则知道我想要什么。我无法在任何地方找到有关此内容的信息，这很令人沮丧。能帮忙吗？

编辑：好吧，我以为我已经表达得很清楚了，但我想我没有。我指的不是想要在悬停时更改背景颜色。那很琐碎。但你知道当你在页面上有文本时，你点击文本并拖动鼠标，或者按下ctrl+A，以使背景颜色发生变化，然后可以复制文本吗？你知道，高亮选择？我不想通过更改背景颜色来使它看起来像正在发生这种情况，我想它确实发生。上传图片到imgur.com，您会明白我的意思。请注意，在悬停在任何已上传图像的链接上时，所选文本将被突出显示，并且您可以复制它。

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

- herpderp

我在任何地方都找不到关于这个的信息，真是令人沮丧。我只是有点好奇..你在哪里和搜什么？ - N 1.1

7个回答

1

这可能与此有关，也可能与此无关：

CSS：

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

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

这将改变您的高亮颜色。

- Michael Wilson

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

- npup

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

- Marc B

-1

a {
    color: red
}

a:hover {
    color: blue
}

或者你也可以这样做

#myDiv {
    background-color: red
}

#myDiv:hover {
    background-color: blue
}

只需要注意IE浏览器，有时它不赞成你做第二个例子中的事情

- cdnicoll

2

通常情况下，IE的行为是一致的。很少会出现“有时候”的情况。我猜你指的是在低于IE7版本中，只有<a>元素支持:hover。而IE7和IE8支持几乎所有渲染元素上的:hover。所以要注意IE的兼容性问题。 - Andy E

-1

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

- buckley

1

除非有文本选择的CSS属性，否则我认为那对我没有什么用处。 - herpderp

-1

查看 jQuery 的悬停文档/示例：

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

- Chris B.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lambacck · Accepted Answer

您需要将这些答案与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，因为它使用浏览器嗅探而不是特性检测。