To highlight text when the mouse pointer drags over it in HTML and CSS
Mark E.
To highlight text when the mouse pointer drags over it in HTML and CSS, you can use the ::selection
pseudo-element in CSS. Here's an example code snippet that demonstrates this:
<!DOCTYPE html>
<html>
<head>
<title>Highlight Text on Drag</title>
<style>
::selection {
background-color: yellow;
}
</style>
</head>
<body>
<p>Select and drag your mouse over this text to highlight it.</p>
<p>Only the text that you drag over will be highlighted.</p>
</body>
</html>
In the code above, we have defined the ::selection
pseudo-element and applied the background-color
property to it. When the user selects and drags their mouse over any part of the text on the page, the background color of the selected text changes to yellow, indicating that it has been highlighted. You can modify the CSS code to use different colors or styles as desired.
Example:
Select and drag your mouse over this text to highlight it.
Only the text that you drag over will be highlighted.
PLG_GSPEECH_SPEECH_BLOCK_TITLE