CSS - 悬停效果不起作用

【问题标题】：CSS - Hover effect not workingCSS - 悬停效果不起作用
【发布时间】：2018-08-27 05:49:02
【问题描述】：

我正在尝试制作一个悬停效果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;
}

【问题讨论】：

  • 或者你可以试试.hover:hover, .hover:focus, .hover:active { -webkit-transform: scale(1.1); transform: scale(1.1); }

标签： html css hover


【解决方案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>

【讨论】：

  • 我在边界外徘徊，但效果已经发生
  • @lhiam 您是否尝试将悬停效果仅应用于表单？
  • 是的，就在黄线内。
  • 更新了！立即检查。
【解决方案2】：

按照您编写此 CSS 规则的方式，它将始终应用于 &lt;div class ="hover"&gt; 元素。

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

.hover:hover {
    ...
}

使用描述元素及其包含的内容的类名而不是hover 也是一个好主意。

【讨论】：

    【解决方案3】：

    您使用悬停的方式是非常错误的。您需要通过以下方式拨打hoverclassname:hover。这种元素被称为伪元素，一直是前端开发的一部分。了解伪元素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>

    【讨论】：

      【解决方案4】：

      如果你想在一个元素上使用一些 css 属性，你可以这样做

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

      应用一个名为 hover 的类只会在元素上添加所有属性，您不会获得悬停效果。

      了解更多关于hover

      【讨论】：

        猜你喜欢
        • 2017-08-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-09-16
        • 1970-01-01
        • 2014-06-10
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode