How to set the font to change when the mouse is moved over in css3-Front-end Q&A-php.cn

How to set the font to change when the mouse is moved over in css3

WBOY

Release： 2022-04-28 15:31:14

Original

2744 people have browsed it

In CSS3, you can use the ":hover" selector and the "font-style" attribute to set the font change when the mouse moves over it. ":hover" can set the style of the element when the mouse moves over it. "font-style" The attribute can set the font style, the syntax is "p:hover{font-style:font style}".

How to set the font to change when the mouse is moved over in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to set the font in css3 to change when the mouse is moved over it

Use the :hover selector and font-style attribute.

:Hover is a special style added when the mouse moves over the link.

Tip: The :hover selector can be used on all elements, not just links.

The font-style attribute specifies the font style of the text.

Possible values for this attribute are as follows:

normal default value. The browser displays a standard font style.
italic The browser will display an italic font style.
oblique The browser will display an oblique font style.
inherit specifies that the font style should be inherited from the parent element.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
p:hover
{
font-style:oblique;
}
</style>
</head>
<body>
<p>划过改变字体</p>
<p><b>注意:</b> 当鼠标移动到连接上 :hover 选择器样式链接到该超链接。</p>
</body>
</html>

Copy after login

Output result:

How to set the font to change when the mouse is moved over in css3

(Learning video sharing: css video Tutorial)

The above is the detailed content of How to set the font to change when the mouse is moved over in css3. For more information, please follow other related articles on the PHP Chinese website!