CSS内联样式是 CSS 风格化网页的一种方式,通常应该尽量避免使用。但是如果你必须使用,那么在定义样式的同时,你也可以定义 hover 的样式。
<p style="color: red; font-size: 20px;"<a href="#" style="color: blue;"onmouseover="this.style.color='red'; this.style.textDecoration='underline';" onmouseout="this.style.color='blue'; this.style.textDecoration='none';">这是一个链接</a></p>
上述代码中,我们在自己的内联样式中使用了 onmouseover 和 onmouseout 属性。当用户将鼠标悬停在链接上时,文字变为红色,下划线也会出现。当鼠标移开链接时,颜色和下划线都会消失,变为原来的蓝色。
这里需要注意的是,我们的内联样式只对这个特定的链接和段落起作用。如果你希望在整个页面上应用 hover 效果,最好在 CSS 样式表中定义它们。不过,内联样式在某些情况下很有用,比如在使用某些 CMS 或在电子邮件中显式签名时。
总体来说,内联样式和使用 JavaScript 定义类似 hover 效果相比,效果轻微。然而,如果你确实需要内联样式,就像上面的示例那样做。