如何在 CSS 中编写内联悬停效果

2025 年 1 月 30 日 | 阅读 3 分钟

悬停效果会在鼠标移入时改变或修改元素。如果鼠标悬停在元素上，则将样式属性添加到该元素。如果鼠标移出元素，则移除样式属性。

悬停属性通过内联 CSS 添加到元素上。内联悬停用于 `onMouseOut` 和 `onMouseOver` 函数。我们可以通过内联属性或脚本标签操作来添加函数。

语法

以下语法用于 CSS 中的内联悬停。

<element onMouseOver = "this.style.color='yellow'"
onMouseOut = "this.style.color='red'">
Information 
</element>

示例

以下示例展示了内联悬停函数。

示例 1

以下示例展示了内联悬停 CSS。我们可以通过鼠标移出和鼠标移入函数来更改颜色。悬停效果会添加到链接和输入标签上。

<!DOCTYPE html>
<html>
<head>
<title> How to write inline hover in css </title>
<style>
body {
text-align: center;
background-color: lightgrey;
}
a {
text-decoration: none;
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h3> How to write inline hover in css </h3>
<h4> We can use the inline hover in css with the style function </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "Write First Name" onMouseOver = "this.style.background='orange'"
onMouseOut = "this.style.background='white'">
</form>
<br>
<a href = "#"
onMouseOver = "this.style.color='yellow'"
onMouseOut = "this.style.color='red'">
JavaTpoint Website
</a>
</body>
</html>

输出

输出显示了内联悬停 CSS。

示例 2

以下示例展示了内联悬停 CSS。我们可以通过鼠标移出和鼠标移入函数来更改操作、样式和设计。悬停效果是通过内联和脚本标签添加到链接和输入标签上的。

<!DOCTYPE html>
<html>
<head>
<title> How to write inline hover in css </title>
<style>
body {
text-align: center;
background-color: lightgrey;
}
a {
text-decoration: none;
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h3> How to write inline hover in css </h3>
<h4> We can use the inline hover in css with the script tag </h4>
<form>
<label for = "first_name"> User Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "Write Name"
onmouseover = "mouseovers1()"
onmouseout = "mouseouts1()">
</form>
<br>
<a href = "#" id = "jtp"
onmouseover = "mouseovers()"
onmouseout = "mouseouts()">
JavaTpoint Website
</a>
<script>
function mouseovers() {
document.getElementById("jtp").style.color = "navy";
}

function mouseouts() {
document.getElementById("jtp").style.color = "red";
}
function mouseovers1() {
document.getElementById("first_name").style.backgroundColor = "yellow";
}

function mouseouts1() {
document.getElementById("first_name").style.backgroundColor = "white";
}
</script>
</body>
</html>

输出

输出显示了内联悬停 CSS。

支持的浏览器

以下浏览器支持内联悬停

谷歌浏览器
Microsoft Edge
火狐
Safari
Opera

结论

CSS 中的内联悬停有助于修改链接或标签的设计。它对于用户来说具有吸引力、引人注目且功能现代。我们可以使用单行样式标签、函数和必需的元素。

下一主题搜索栏 CSS

如何在 CSS 中编写内联悬停效果

语法

示例

支持的浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何在 CSS 中编写内联悬停效果

语法

示例

支持的浏览器

结论

相关帖子

Conditional Formatting in CSS

CSS :Not(:last-of-type)

CSS Diner

CSS Layers

CSS 的特性

CSS Hover Animation

CSS 中的 VW

CSS Style form Input

CSS Align Self

CSS Shapes

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器