Question

我想在css中使用悬停来增加标题标记中文本的大小，但是每次悬停时，大小都会增加。

<!DOCTYPE html>
    <html>
    <body>

    <h1 style="color:blue;margin-left:30px;,
    h1:hover {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 30px;
    }">This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

Answer 1

欢迎使用堆栈溢出。悬停应该通过CSS完成。以下是您可以使用的代码。

代码：

<!DOCTYPE html> 
<html>
<head>
<style>
h1:hover { position: absolute; top: 0; left: 0; font-size: 30px; }
</style>
</head>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1> 
<p>This is a paragraph.</p> 
</body> 
</html>

有一点需要注意的是使用这将意味着所有h1都会受到此代码的影响。如果你想要定位一个H1，那么我会在html上使用一个类并在CSS中引用它。

这是你的追求。

Answer 2

您无法在:hover中使用inline style。您可以在External style sheet或Internal style sheet中使用它。

h1:hover {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 40px;
}

<h1 style="color:blue;margin-left:30px;">This is a heading</h1> 
<p>This is a paragraph.</p>

Answer 3

不幸的是，您无法使用内联CSS实现悬停效果。您必须使用外部样式表或普通脚本标记。您的代码将如下所示：
Style.css：

h1:hover { position: absolute; top: 0; left: 0; font-size: 30px; }

<强>的index.html：

    <html>
        <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

        </body>
        </html>

如何使用css将鼠标悬停在文本上

3 个答案: