To highlight text when the mouse pointer drags over it in HTML and CSS

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.

 

ExampleHighlight Text on Drag

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

Related Articles

- All From ChatGPT
PLG_GSPEECH_SPEECH_BLOCK_TITLE