为什么我的 :hover css 属性不起作用？

问题描述 投票：0回答：2

我正在制作一个网站来保存我的所有项目，我想要在您将鼠标悬停在“很棒的字体”图标上时产生效果，它会脉冲输入和输出，但是：悬停效果根本不起作用。即使尝试更改字体大小也不起作用。我相信 Font Awesome sdk 中的某些内容会覆盖它，但很有可能我只是个傻瓜。

这是CSS

body {
    display: flex;
    height: 100vh;
    margin: 0;
}

.body-container {
    display: flex;
    align-items: center;
}

.links i {
    font-size: 30px;
    padding-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.links i:hover {
    animation: pulse 3s forwards;
}

@keyframes pulse {
    0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
}

.fade-in {
    animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar {
    display: none;
}

这是 HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
    <script src="https://kit.fontawesome.com/19a251552a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="body-container fade-in">
        <div class="home-text fade-in">
            <h1>Damilola Owonibi</h1>
            <p>Front End Developer</p>
            <div class="links">
                <i class="fa-brands fa-github"></i>
                <i class="fa-brands fa-twitter"></i>
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-linkedin"></i>
            </div>
        </div>
        <div class="image-div fade-in">
            <img src="img/prof.png" id="image-div-pic" alt="">
        </div>
    </div>
    <div class="area" >
        <ul class="circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
</div >
</body>
</html>
html css hover
2个回答
0
投票

请参阅 MDN 上的 

transform
：

警告：只有可变形元素才能变形。也就是说，布局受 CSS 框模型控制的所有元素，除了：不可替换的内联框、表格列框和表格列组框。

默认情况下，

i
元素是
display: inline
，因此会生成一个不可替换的内联框。

0
投票

看起来一切正常，但在不同的浏览器中可能会出现问题。由于 

<i>
中是一个内联元素，它也可能会导致问题。给出 
<i>
元素 
display: inline-block;
。那应该有帮助。此外，如果您希望该项目真正脉动，请确保为悬停动画规则添加无限。

body {
    display: flex;
    height: 100vh;
    margin: 0;
}

.body-container {
    display: flex;
    align-items: center;
}

.links i {
    display: inline-block;
    font-size: 30px;
    padding-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.links i:hover {
    animation: pulse 1s forwards infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
}

.fade-in {
    animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar {
    display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
    <script src="https://kit.fontawesome.com/19a251552a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="body-container fade-in">
        <div class="home-text fade-in">
            <h1>Damilola Owonibi</h1>
            <p>Front End Developer</p>
            <div class="links">
                <i class="fa-brands fa-github"></i>
                <i class="fa-brands fa-twitter"></i>
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-linkedin"></i>
            </div>
        </div>
        <div class="image-div fade-in">
            <img src="img/prof.png" id="image-div-pic" alt="">
        </div>
    </div>
    <div class="area" >
        <ul class="circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
</div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.