Question

我正在尝试制作悬停效果here，以便当我在边界内悬停时，就会像在site中一样发生“增长”效果。

我复制获得的代码here并将其添加到.hover类中，但是没有任何反应。

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：

* {
    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

您还需要包括此选择器：

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

结果：

* {
    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

您编写此CSS规则的方式，将始终应用于<div class ="hover">元素。

您只想在用户将鼠标悬停在元素上时应用规则。您需要使用:hover pseudo-class。您的规则应如下所示：

.hover: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. 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

如果您想在元素上使用某些CSS属性，可以用这种方式进行

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

应用名称为hover的类只会将所有属性添加到您不会获得悬浮效果的元素上。

详细了解hover

CSS-悬停效果不起作用

4 个答案: