как выделить текст при наведении - PullRequest
Новая
       22

как выделить текст при наведении

3 голосов
/ 15 марта 2010

Под выделением я имею в виду то, что вы делаете, чтобы текст, когда вы наводите курсор мыши на него. Если вы используете imgur.com, то вы знаете, чего я хочу. Я ничего не могу найти об этом нигде, это расстраивает. помочь?

Редактировать: Хорошо, я думал, что это достаточно ясно, но я думаю, нет. Я не имею в виду, я хочу изменить цвет фона при наведении. Это тривиально. Но вы знаете, когда у вас есть текст на странице, и вы нажимаете на текст и перетаскиваете мышь, или вы нажимаете Ctrl + A, так что цвет фона меняется, и вы можете затем скопировать текст? Вы знаете, выделение? Выбор? Я не хочу, чтобы это выглядело так, как будто это происходит путем изменения цвета фона, я хочу, чтобы оно действительно происходило. Загрузите изображение на imgur.com, и вы увидите, что Я имею в виду. Обратите внимание, как при наведении указателя мыши на любую из ссылок на загруженное изображение текст выделяется - его можно скопировать.

Вот почему так трудно было найти что-нибудь об этом. Все, что я получаю, это результаты того, как изменить цвет фона.

Ответы [ 7 ]

2 голосов
/ 15 апреля 2011

Вам нужно объединить эти ответы с событием мышиного ввода: 

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 из другого ответа, потому что он использует сниффинг браузера, а не обнаружение функций.

1 голос
/ 29 октября 2010

Это может иметь или не иметь отношение:

CSS: 

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

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

Это изменит ваш цвет подсветки.

0 голосов
/ 15 марта 2010

Для IE, я думаю, вы все еще можете использовать 

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

(проверьте свойство window.clipboardData - и, возможно, даже typeof window.clipboardDatasetData - перед использованием).

Что касается FF, раньше был взлом со вспышкой, который можно было использовать в качестве обходного пути, но с Flash 10 эта дорога тоже закрыта. Вот ссылка на пример флеш-вещи, и некоторые люди, разочарование которых, похоже, зависит от их версии Flash:

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

0 голосов
/ 15 марта 2010

Ознакомьтесь с документами / примерами jQuery при наведении курсора:

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

0 голосов
/ 15 марта 2010 
a {
    color: red
}

a:hover {
    color: blue
}

или вы также можете сделать 

#myDiv {
    background-color: red
}

#myDiv:hover {
    background-color: blue
}

Просто смотри IE, иногда он хмурится, когда ты делаешь что-то вроде второго примера

0 голосов
/ 15 марта 2010 
<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>
0 голосов
/ 15 марта 2010

используйте псевдокласс css :hover http://www.w3schools.com/CSS/css_pseudo_classes.asp

...