css实现鼠标划过中英文切换

CSS实现鼠标划过中英文切换是很实用的功能。下面我们来介绍一下如何使用CSS实现这个功能。

/* CSS设置英文隐藏 */
.en{
    display:none;
}

/* CSS划过时显示中英文 */
.zh:hover .zh{
    display:none;
}
.zh:hover .en{
    display:inline;
}

.en:hover .en{
    display:none;
}
.en:hover .zh{
    display:inline;
}

可以先在HTML中写出需要切换的中英文内容。

    
这是中文内容。
    
This is English text.


    
这是中文内容。
    
This is English text.

以上代码中，CSS设置了英文隐藏，当鼠标划过中文内容时，英文内容展示，而中文内容则隐藏。同样地，当鼠标划过英文内容时，中文内容展示，英文内容隐藏。以上就是使用CSS实现鼠标划过中英文切换的方法。