CSS - 悬停效果不起作用

Question

I'm trying to make an hover effect here , so that when I hover inside the border, the "grow" effect will happen just like in this site .我试图在这里制作一个悬停效果，这样当我在边框内悬停时，“增长”效果就会像在这个站点中一样发生。

I copy the code I got here and add it in the .hover class, but nothing happens.我复制了我在此处获得的代码并将其添加到.hover类中，但没有任何反应。

HTML: HTML：

<?php include('server.php') ?>
<!DOCTYPE html>
<html >
<head>
    <title>Log In</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-image: url('./image5.jpg'); background-size: 100% 100vh; ">

    <div class="hover">

            <div class="header" style="background: rgba(76, 175, 80, 0.1);">
            <h2 style="color:   #FFFACD;">Register</h2>
            </div>

            <form method="post" action="register.php" style="background: rgba(76, 175, 80, 0.2);" >

            <?php include('errors.php'); ?>

            <div class="input-group" >
                <label style="color:    #FFFACD;">Username</label>
                <input type="text" name="username" value="<?php echo $username; ?>" style="background: rgba(0, 0, 250, 0.1);" >
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Email</label>
                <input type="email" name="email" value="<?php echo $email; ?>" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Password</label>
                <input type="password" name="password_1" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Confirm password</label>
                <input type="password" name="password_2" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <button type="submit" class="btn" name="reg_user" style="background: rgba(0, 0, 250, 0.1);">Register</button>
            </div>
            <p style="color:    #FFFACD;">
                Already a member? <a href="login.php" style="color: #6495ED;">Sign in</a>
            </p>
            </form>

    </div>
</body>
</html>

CSS: CSS：

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 120%;
    background: #F8F8FF;
}

.header {
    width: 30%;
    margin: 50px auto 0px;
    color: white;
    background: #5F9EA0;
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
}

.hover {
  /*display: inline-block;   - I exclude this because of display issue */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

form, .content {
    width: 30%;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #B0C4DE;
    background: white;
    border-radius: 0px 0px 10px 10px;
}
.input-group {
    margin: 10px 0px 10px 0px;
}

.input-group label {
    display: block;
    text-align: left;
    margin: 3px;
}
.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
}
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5F9EA0;
    border: none;
    border-radius: 5px;
}
.error {
    width: 92%; 
    margin: 0px auto; 
    padding: 10px; 
    border: 1px solid #a94442; 
    color: #a94442; 
    background: #f2dede; 
    border-radius: 5px; 
    text-align: left;
}
.success {
    color: #3c763d; 
    background: #dff0d8; 
    border: 1px solid #3c763d;
    margin-bottom: 20px;
}

Answer 1

You need to include this selector too:您还需要包含此选择器：

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Results:结果：

 * { margin: 0px; padding: 0px; } body { font-size: 120%; background: #F8F8FF; } .header { color: white; background: #5F9EA0; text-align: center; border: 1px solid #B0C4DE; border-bottom: none; border-radius: 10px 10px 0px 0px; padding: 20px; } .hover { /*display: inline-block; - I exclude this because of display issue */ vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; width: 30%; margin: 50px auto 0px; } .hover:hover, .hover:focus, .hover:active { -webkit-transform: scale(1.1); transform: scale(1.1); } form, .content { padding: 20px; border: 1px solid #B0C4DE; background: white; border-radius: 0px 0px 10px 10px; } .input-group { margin: 10px 0px 10px 0px; } .input-group label { display: block; text-align: left; margin: 3px; } .input-group input { height: 30px; width: 93%; padding: 5px 10px; font-size: 16px; border-radius: 5px; border: 1px solid gray; } .btn { padding: 10px; font-size: 15px; color: white; background: #5F9EA0; border: none; border-radius: 5px; } .error { width: 92%; margin: 0px auto; padding: 10px; border: 1px solid #a94442; color: #a94442; background: #f2dede; border-radius: 5px; text-align: left; } .success { color: #3c763d; background: #dff0d8; border: 1px solid #3c763d; margin-bottom: 20px; }

 <html > <head> <title>Log In</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body style="background-image: url('./image5.jpg'); background-size: 100% 100vh; "> <div class="hover"> <div class="header" style="background: rgba(76, 175, 80, 0.1);"> <h2 style="color: #FFFACD;">Register</h2> </div> <form method="post" action="register.php" style="background: rgba(76, 175, 80, 0.2);" > <?php include('errors.php'); ?> <div class="input-group" > <label style="color: #FFFACD;">Username</label> <input type="text" name="username" value="<?php echo $username; ?>" style="background: rgba(0, 0, 250, 0.1);" > </div> <div class="input-group"> <label style="color: #FFFACD;">Email</label> <input type="email" name="email" value="<?php echo $email; ?>" style="background: rgba(0, 0, 250, 0.1);"> </div> <div class="input-group"> <label style="color: #FFFACD;">Password</label> <input type="password" name="password_1" style="background: rgba(0, 0, 250, 0.1);"> </div> <div class="input-group"> <label style="color: #FFFACD;">Confirm password</label> <input type="password" name="password_2" style="background: rgba(0, 0, 250, 0.1);"> </div> <div class="input-group"> <button type="submit" class="btn" name="reg_user" style="background: rgba(0, 0, 250, 0.1);">Register</button> </div> <p style="color: #FFFACD;"> Already a member? <a href="login.php" style="color: #6495ED;">Sign in</a> </p> </form> </div> </body> </html>

Answer 2

The way you've written this CSS rule, it will always apply to the <div class ="hover"> element.按照您编写此 CSS 规则的方式，它始终适用于<div class ="hover">元素。

You want to apply the rule only when the user hovers over the element.您只想在用户将鼠标悬停在元素上时应用规则。 You need to use the :hover pseudo-class .您需要使用:hover伪类。 Your rule should look like this:您的规则应如下所示：

.hover:hover {
    ...
}

It might also be a good idea to use a class name that describes the element and what it contains, instead of hover .使用描述元素及其包含的内容的类名而不是hover也可能是一个好主意。

Answer 3

The way you working with hover is extremely wrong.你使用悬停的方式是非常错误的。 Your need to call the hover in the following manner classname:hover .您需要以下列方式调用hover classname:hover 。 This kind of elements are called as pseudo element which are always being a part of front-end development.这种元素被称为伪元素，它们一直是前端开发的一部分。 Learn about pseudo elements here在此处了解伪元素

 * { margin: 0px; padding: 0px; } body { font-size: 120%; background: #F8F8FF; } .header { width: 30%; margin: 50px auto 0px; color: white; background: #5F9EA0; text-align: center; border: 1px solid #B0C4DE; border-bottom: none; border-radius: 10px 10px 0px 0px; padding: 20px; } .hover:hover, .hover:focus, .hover:active { opacity:0.5; } .hover { /*display: inline-block; - I exclude this because of display issue */ vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } form, .content { width: 30%; margin: 0px auto; padding: 20px; border: 1px solid #B0C4DE; background: white; border-radius: 0px 0px 10px 10px; } .input-group { margin: 10px 0px 10px 0px; } .input-group label { display: block; text-align: left; margin: 3px; } .input-group input { height: 30px; width: 93%; padding: 5px 10px; font-size: 16px; border-radius: 5px; border: 1px solid gray; } .btn { padding: 10px; font-size: 15px; color: white; background: #5F9EA0; border: none; border-radius: 5px; } .error { width: 92%; margin: 0px auto; padding: 10px; border: 1px solid #a94442; color: #a94442; background: #f2dede; border-radius: 5px; text-align: left; } .success { color: #3c763d; background: #dff0d8; border: 1px solid #3c763d; margin-bottom: 20px; }

 <!DOCTYPE html> <html> <head> <title>Log In</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body style="background-image: url('./image5.jpg'); background-size: 100% 100vh; "> <div class="hover"> <div class="header" style="background: rgba(76, 175, 80, 0.1);"> <h2 style="color: #FFFACD;">Register</h2> </div> <form method="post" action="register.php" style="background: rgba(76, 175, 80, 0.2);"> <?php include('errors.php'); ?> <div class="input-group"> <label style="color: #FFFACD;">Username</label> <input type="text" name="username" value="<?php echo $username; ?>" style="background: rgba(0, 0, 250, 0.1);"> </div> <div class="input-group"> <label style="color: #FFFACD;">Email</label> <input type="email" name="email" value="<?php echo $email; ?>" style="background: rgba(0, 0, 250, 0.1);"> </div> <div class="input-group"> <label style="color: #FFFACD;">Password</label> <input type="password" name="password_1" style="background: rgba(0, 0, 250, 0.1);"> </div> <div class="input-group"> <label style="color: #FFFACD;">Confirm password</label> <input type="password" name="password_2" style="background: rgba(0, 0, 250, 0.1);"> </div> <div class="input-group"> <button type="submit" class="btn" name="reg_user" style="background: rgba(0, 0, 250, 0.1);">Register</button> </div> <p style="color: #FFFACD;"> Already a member? <a href="login.php" style="color: #6495ED;">Sign in</a> </p> </form> </div> </body> </html>

Answer 4

If you want to use some css properties on a element u do it in this way如果你想在一个元素上使用一些 css 属性，你可以这样做

    .some_class_name:hover {
      /* css properties */
     }

Applying a class with name hover would just add all properties on the element you wont get the hover effect.应用名称为 hover 的类只会在您不会获得悬停效果的元素上添加所有属性。

Learn more about hover了解有关悬停的更多信息

CSS - 悬停效果不起作用

问题描述

4 个解决方案

解决方案1
1 已采纳 2018-08-27 05:54:39

解决方案2
1 2018-08-27 05:55:34

解决方案3
1 2018-08-27 05:56:39

解决方案4
0 2018-08-27 05:54:25

CSS - 悬停效果不起作用

问题描述

4 个解决方案

解决方案1 1 已采纳 2018-08-27 05:54:39

解决方案2 1 2018-08-27 05:55:34

解决方案3 1 2018-08-27 05:56:39

解决方案4 0 2018-08-27 05:54:25

解决方案1
1 已采纳 2018-08-27 05:54:39

解决方案2
1 2018-08-27 05:55:34

解决方案3
1 2018-08-27 05:56:39

解决方案4
0 2018-08-27 05:54:25