關於當鼠標懸浮時如何修改文字內容，即通過 css 樣式切換文字內容

修改文字內容，通常是通過 JS 來修改。 當鼠標懸浮時，通常使用偽元素:hover 來修改樣式，如何在鼠標懸浮時修改html內容？ :hover 是無法修改html 內容，但是可以通過一系列的樣式變化，達到當鼠標懸浮時，改變html內容。
用JS可以通過innerHtml來修改，在此不介紹。 純CSS實現鼠標放上去改變文字內容 先上代碼 html

<div class="par">
	<div class="show">
		平時顯示的文字
		<div class="hover-show">
			鼠標懸浮時顯示的文字
		</div>




	</div>
</div>

css 部分

.par {
	width: 300px;
	height: 30px;
	margin: 100px auto;
	font-size: 20px;
	line-height: 30px;
	background-color: #ff000020;
	overflow: hidden;
}
	.par .show:hover {
	padding-top: 30px;




}
.par .hover-show {
	margin-top: -60px;
}

實際效果
鼠標懸浮時的狀態 帶有背景色的為父盒子. 思路：

給父盒子設置高度，並且設置溢出隱藏

需要鼠標懸浮時顯示的文字需要嵌套在平時顯示文字的盒子裏

給懸浮時顯示的文字的盒子添加 margin-top:-60px，-60px 通常為兩倍行高。

給平時顯示的文字的盒子添加鼠標懸浮樣式·padding-top: 30px;· 30px 通常為文字行高。 這樣就可以達到鼠標懸浮時改變文字內容的效果了。

注意：

margin 值和 padding 值可根實際情況調整；

嵌套關系為 父元素，平時顯示文字的盒子，鼠標懸浮時顯示的文字，後面兩個盒子不能同級，否則鼠標懸浮時，會出現不准確跳動的問題。