我需要关于为什么按钮没有显示动画的帮助[关闭]答案

【问题标题】：I need help as to why the buttons are not showing the animation [closed]我需要关于为什么按钮没有显示动画的帮助[关闭]
【发布时间】：2022-09-23 01:11:44
【问题描述】：

我打算创建一个在线图书馆系统，下面是该系统的前两页

下面是我的登录页面：

         <!DOCTYPE html>
<html>
<center>
<head> <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" /></head>
<style>

    *{
            margin: 0;
            padding: 0;
    }
    ::placeholder{
            color: chartreuse;
            opacity: 1;
    
        }


    body{
                     background-image: url(\'https://i0.wp.com/www.socialnews.xyz/wp-content/uploads/2020/10/26/5573c6f0bee7ca021f4a8aecbaf6cbeb.jpg?quality=80&zoom=1&ssl=1\');
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
            background-size: cover;
                    background-repeat: no-repeat;
                    background-size:cover;
                    background-position:center;
            height:100%;
            width:100%;
            margin: 0;
            min-height: 100vh;
           
        }

    .Reset
        {
            border-radius: 25px;
            border: none ;
            box-sizing: content-box;
            cursor: pointer ;
            padding: 25px 25px;
            color : -webkit-linear-gradient(#eee, #333);
            background: indigo;
            font:  \"comic-sans\" ;
            opacity: 0.5;
            box-shadow: 0 0 30px 6px rgba(0, 0, 0, 0.5);
            width: 180px;
            height: 50px;
            transition: transform 0.5s;
        }

    .Reset:hover
        {
            opacity: 1;
            transform:  scale(3);
        }
    #my_form 
        {
            padding: 50px 0;
            justify-content: center;
            vertical-align: middle;
        }

    #my_form  input[type = \"password\"],#my_form input[type = \"email\"],#my_form input[type = \"text\"]
        {
            width:60%;
            padding: 10px 24px 10px 10px;
            box-sizing: content-box;
            border-bottom: 1px solid #fff;
        }
    .password-container 
        {
            width: 600px;
            position: relative;
            margin: 15px auto;
            padding-top: 1px;
            padding-bottom: 1px;
        }

    .password-container input
        {   
            width: 90%;
            border: none;
            outline: none;
            background: transparent;
            color: blue;
            font-size: 27px;
            font-weight: 900;
        }   
    .emailId-container input
        {   
            width: 90%;
            border: none;
            outline: none;
            background: transparent;
            color: blue;
            font-size: 24px;
        }   
    .username-container input
        {   
            width: 90%;
            border: none;
            outline: none;
            background: transparent;
            color: blue;
            font-size: 24px;
        }

    .form-box 
        {
            width: 600px;
            margin: 15% auto ;
            background: rgba(245,40,145,0.8);
            box-shadow: 0 0 30px 6px rgba(25, 0, 0, 1);
            padding: 3px 0;
            color: black;
            border-radius: 12px;
        
        
        }

    .material-symbols-outlined 
        {
            font-variation-settings:
            \'FILL\' 1,
            \'wght\' 900,
            \'GRAD\' 0,
            \'opsz\' 48 ;
            position : absolute;
            right: 12%;
            top: 36%;
            cursor: pointer;
            color: yellow;
        }

    </style>
   <body>
    <form action=\"login\" method=\"POST\"  id=\"my_form\">
        <center>&emsp14;
            <div class = \"form-box\">
                <div class = \"username-container\"><label for =\"username\" > <input type = \"text\"  id =\"userName\"  name=\"username\" placeholder = \"Enter your userId:\"></label></div><br><br><br>
                <div class = \"emailId-container\"><label for=\"emailid\"><input type = \"email\"  id =\"emailId\"  name =\"emailid\"  placeholder=\"Enter your email\"></label></div><br><br><br>
                <div class = \"password-container\"><input type = \"password\" id = \"password\"  name=\"passwoRd\" placeholder=\"Enter your 
      password\">
                <i id =\"show-password\"> <span class=\"material- 
      symbols-outlined\" id=\"icon\">visibility</span></i></div><br><br> 
        <br>
                <label for =\"imAge\"><input type = \"file\"  id=\"fIle\"  name=\"File\" accept=\"image/png, image/jpeg,image/gif,image/jpg\" placeholder=\"Upload your Image\" class=\"Reset\">&nbsp;&nbsp;&nbsp; 
      </label><br><br><br>
                <input type = \"reset\" id=\"Reset\" onclick=\'reset()\' 
      class=\"Reset\">&emsp;&emsp;
                <input type = \"submit\" id = \"Submit\" formaction = 
     \"dashboard.html\" class=\"Reset\">
            </div>
        </center>
    </form>
<script>
    const showPassword = document.querySelector(\"#show-password\");
    const Passwordfield = document.querySelector(\"#password\");
    const icon = document.getElementById(\"icon\");
    showPassword.addEventListener(\"click\" ,  function(){
            this.classList.toggle(\"fa-solidfa-eye-slash\");  
            const type = Passwordfield.getAttribute(\"type\") === \"password\" ? \"text\" : \"password\";
            Passwordfield.getAttribute(\"type\") === \"password\" ? icon.innerText=\"visibility_off\" : icon.innerText=\"visibility\";
                        password.setAttribute(\"type\", type);
        })

    function reset()
        {
            document.getElementById =(\"userName\").value = \"  \"  ;
            document.getElementById =(\"emailId\").value = \"  \" ;
            document.getElementById =(\"password\").value = \"  \"  ;
        }

</script>
</body>
</center>
</html>

是什么阻止了过渡不起作用？解决办法是什么？（已解决）

由于我是 Web Development 的新手，我现在遇到了菜单问题。就像菜单显示在菜单栏图标的前面一样，但我希望它隐藏在菜单栏下。我曾将转换用作实验，现在工作正常，但下拉菜单没有按照我的预期出现。下面是我的 Dashboard.html


<!DOCTYPE html>
<html>
    <head>
    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" /></head>
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>

        <style>
            body
                {
                    margin: 0;
                    padding: 0;
                }
             
            .options >.menu1
                {
                    display: inline;}
            .menu > li
                {
                     position: relative;
                        height: 30px;
                        width: 150px;
                        background: #cc126f;transition: transform 0.5s;
                }
            .menu > li:hover 
        {   
                background: #CCCCCC; 
               transform: scale(3);
           }
            .mode
                {
                     position: relative;
                        right: 120px;
                        width: 150px;
                        list-style: none;
                        padding: 0 0 0 30px;
                        margin: 0;
                        display: none;
                    border-radius = .25rem;
                    top = calc(60% + 0.25rem);
                }

            .mode > li
                {
                            position: relative;
                            height: 30px;
                        background: #cc126f;
                        transition: transform 1.5s;
                        
                        
                        
                }
            .mode > li:hover 
                  { 
                           background: #CCCCCC ; 
                            transform: scale(3);
                }

            .menu 
                {
                     list-style: none;
                     margin-left: 1150px;
                    right: 100px;
                    z-index: 10;
                    box-shadow: 10 10px 5px 0 #aaaaaa;
                }
            .menu li:hover > ul
                {
                    display: inline;
                    position: relative;
                    
                }
            .menu a
                {
                    display: inline;
                    
                    transition: 0.3s ease-in-out;
                }
            .menu a:hover
                {
                    color= #000000;
                }
            .material-symbols-outlined {
                font-variation-settings:
                \'FILL\' 0,
                 \'wght\' 500,
                \'GRAD\' 0,
                \'opsz\' 48;
                cursor: pointer;
                right: 12%;
                position: absolute;
                display: block;
                margin-left: 100px;
                margin-right: auto;
                margin-bottom: auto;
                margin-top: 1px;
            
                }

        </style>
    

    <body>
        <div id= \"Options\" class= \"options\"><i class= \"menu1\"><span class=\"material-symbols-outlined\" onclick=\"openMenu()\">menu_open</span>
            <div class=\"dropdown\" >
                <ul class= \"menu\">
                <li> <a href= \"#\"> Preferrences</a></li>
                <li><a href= \"#\"> Theme</a>
                    <ul class= \"mode\">
                    <li> <a href= \"#\"> Day</a></li>
                    <li><a href= \"#\"> Night</a></li>
                    <li> <a href= \"#\"> Browser settings</a></li>
                    </ul>
                </li>
                <li> <a href= \"#\"> Achievements</a></li>
                <li> <a href= \"#\">Connections</a></li>
            </div>
            </i>
            </div>
            

        <script>
            function openMenu() {
                document.getElementById(\"Options\").style.width = \"250px\";
                    }

            function closeMenu() {
                document.getElementById(\"Options\").style.width = \"150px\";
                    }
        </script>
    </body>

</html>

我一直面临很多问题已关闭问题，因此迫切需要让我知道为什么我不能直接从记事本中直接复制我的 html 代码，即使我在那里写作时使用了标识。也许这是我第三次面临这个问题

如果不查看所有相关代码，我们将无法调试它。这可能有数百个原因可能无法达到您的预期。
我在.Reset 类上看不到任何opacity 属性。你忘了添加吗？
我只是想看看过渡是否有效。

标签： javascript html css

【解决方案1】：

错误：.Reset: hover {}

正确：.Reset:hover {}

请参阅下面的 sn-p。

.Reset {
  border-radius: 25px;
  border: none;
  box-sizing: content-box;
  cursor: pointer;
  padding: 25px 25px;
  color: darkgreen;
  background: indigo;
  font: "comic-sans";
  box-shadow: 0 0 30px 6px rgba(0, 0, 0, 0.5);
  width: 120px;
  height: 50px;
  transition: transform 2s;
}

.Reset:hover {
  opacity: 1;
  transform: scale(2);
}

&lt;div class="Reset"&gt;&lt;/div&gt;

【讨论】：

由错字引起的问题不应回答，而是标记并关闭为Not reproducible or caused by typos

【解决方案2】：

您在 .Reset 类中缺少 transform 属性。以下更改应解决此问题：

.Reset {
  border-radius: 25px;
  border: none;
  box-sizing: content-box;
  cursor: pointer;
  padding: 25px 25px;
  color: darkgreen;
  background: indigo;
  font: "comic-sans";
  box-shadow: 0 0 30px 6px rgba(0, 0, 0, 0.5);
  width: 120px;
  height: 50px;
  transform: scale(1); /*This should be added to make the transition works*/
  transition: transform 2s;
}

.Reset:hover {
  opacity: 1;
  transform: scale(2);
}

【讨论】：

不应该回答由错字引起的问题，而是标记并关闭为Not reproducible or caused by typos