關於給input、div添加hover樣式,邊框變大后里面的文字移動問題-解決辦法


<style>
        div {
            width: 200px;
            height: 30px;  
        }
        input {
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            font-size: 12px;
            line-height: 24px;
        }
        input:hover {
            border: 2px solid #d9d9d9;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="電話號">
    </div>
</body>

</html>

這樣寫,鼠標移上去后input里的文字就會移動

解決辦法,給要增大邊框先預留一個空間,可以input添加一個padding:1px;  然后鼠標以上去在設置為0,input:hover{padding:0px}; 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM