Question

我试图制作一个class，但它没有用，所以我尝试使用style来制作hover，但它不起作用。当我悬停时，如何使button更改的背景颜色。或者如何在php中创建class？

<?php if (isset($_SESSION['uID'])) {
            echo "<form action='includes/logout.inc.php' >
                    <button>LOG OUT </button>
                </form>";
            } else {
                echo" <form action='includes/login.inc.php' method='POST'>
                    <input type='text' name='u_Email' placeholder='E-mail'> <br/>
                    <input type='password' name='uWachtwoord' placeholder='Wachtwoord'> 
            <button style='background-color:orange;color:white;border-width:0px;width:300px;height:50px;font-family:BerlinSansFB;font-size:30px;hover:background-color:black;' name='button' id='button' type='submit'>LOGIN</button>
                </form>";
            } ?>

Answer 1

使用内部css尝试此操作。

    <style> 
.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}
</style>

将此课程提供给您的按钮并进行尝试。感谢。

Answer 2

将所有这些样式移动到单独的CSS文件中，然后使用:hover伪类，如下所示：

button {
  /* All those styles */
}

button:hover {
    /* Stuff you want to override on hover. For example: */
    background-color: #f00;
}

Answer 3

更改了您的代码：添加了类名＆＃34;登录按钮＆＃34;按钮

<?php if (isset($_SESSION['uID'])) {
            echo "<form action='includes/logout.inc.php' >
                    <button>LOG OUT </button>
                </form>";
            } else {
                echo" <form action='includes/login.inc.php' method='POST'>
                    <input type='text' name='u_Email' placeholder='E-mail'> <br/>
                    <input type='password' name='uWachtwoord' placeholder='Wachtwoord'> 
            <button class='login-button' name='button' id='button' type='submit'>LOGIN</button>
                </form>";
            } ?>

放CSS：

.login-button { background-color:orange;color:white;border-width:0px;width:300px;height:50px;font-family:BerlinSansFB;font-size:30px; }
.login-button:hover { background-color:black; }

Answer 4

您需要拥有与button:hover {}样式分开的button {} css样式。

最好将css与html分开。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            button {
              background-color:orange;
              color:white;
              border-width:0px;
              width:300px;
              height:50px;
              font-family:BerlinSansFB;
              font-size:30px;
            }
            button:hover {
              background-color:black;
            }
        </style>
    </head>
    <body>
        <?php if ( isset($_SESSION['uID']) ): ?>
            <form action='includes/logout.inc.php' >
                <button>LOG OUT </button>
            </form>
        <?php else: ?>
            <form action='includes/login.inc.php' method='POST'>
                <input type='text' name='u_Email' placeholder='E-mail'> <br/>
                <input type='password' name='uWachtwoord' placeholder='Wachtwoord'>
                <button name='button' id='button' type='submit'>LOGIN</button>
            </form>
        <?php endif ?>
    </body>
</html>

我想在我的按钮上使用鼠标悬停。该按钮在我的PHP代码中

4 个答案: