溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css實現(xiàn)鼠標選中文字后改變背景色的方法

發(fā)布時間:2021-01-07 09:43:33 來源:億速云 閱讀:357 作者:小新 欄目:web開發(fā)

小編給大家分享一下css實現(xiàn)鼠標選中文字后改變背景色的方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

css中可以使用“::selection”選擇器來實現(xiàn)鼠標選中文字后改變背景色,只需給文字元素E添加“E::selection{background: 背景色值;}”即可。

css實現(xiàn)鼠標選中文字后改變背景色

css鼠標選中文字后改變背景色可以使用::selection選擇器。

::selection選擇器匹配元素中被用戶選中或處于高亮狀態(tài)的部分。::selection只可以應(yīng)用于少數(shù)的CSS屬性:color、background、cursor和outline。

代碼示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p {
				border: 1px solid red;
			}
			
			.color::-moz-selection {
				background: #93c;
				color: #fcf;
			}
			
			.color::selection {
				background: #93c;
				color: #fcf;
			}
		</style>
	</head>

	<body>
		<p>默認文本。測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!</p>
		<p class="color">鼠標選中文字后改變背景色。測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!測試文本!</p>
	</body>

</html>

效果圖:

css實現(xiàn)鼠標選中文字后改變背景色的方法

看完了這篇文章,相信你對“css實現(xiàn)鼠標選中文字后改變背景色的方法”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI