css 伪活动类和悬停类不工作

xdnvmnnf 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(109)

嘿这里的任何人都有CSS伪类的深度知识请帮助。我在锚链接按钮中应用活动和悬停类，但不工作。我尝试在火狐，勇敢， chrome 浏览器它不完美地工作。在火狐活动类工作悬停类不和勇敢或 chrome 悬停类工作活动类不。html code html代码图像css code CSS cose图像

css

来源：https://stackoverflow.com/questions/73734468/pseudo-active-class-and-hover-class-does-not-working

1条答案

按热度按时间

wfsdck301#

你的代码是正确的，它的工作.

.btn:link, .btn:active {
text-transform: uppercase; background-color: white; display: inline-block; padding: 15px 40px; border-radius: 100px; transition: all 1s;}
.btn:hover {
transform: translateX(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
.btn.active {
transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
.btn-white {
text-decoration: none; color: #777;}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400, 700,900" rel="stylesheet"> 
    <link rel="stylesheet" href="css/icon-font.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png">
    <script src="style.js" defer></script>
    <title>Natours | Exciting tours for adventurous people</title>
</head>

<body>
    <header class="header">
        <div class="logo-box">
            <img src="../starter/img/logo-white.png" alt="Logo" class="logo"> </div>
        <div class="text-box">
            <h1 class="heading-primary">
                <span class="main-text">outdoors </span>
                <span class="sub-text">is where life happen</span>
                <h1> <a href="#" class="btn btn-white" id="btn-tour">discover our tours</a>
        </div>
    </header>
</body>

</html>

赞(0）回复(0）举报 2023-02-26

我来回答

css 伪活动类和悬停类不工作

1条答案

相关问题

热门标签

最新问答