Блог

Главная - Вопросы по программированию - Изменение положения с помощью onmouseover

Изменение положения с помощью onmouseover

#javascript

Вопрос:

 <!DOCTYPE html>
<html>
    <head>
        <title>Button Homework</title>
        
        <script>
            function first()    {
                document.getElementById('type1').style.left= "100px";
            }
            
            function second()   {
                document.getElementById('type1').style.position = 'absolute';
            }
        </script>
    </head>
    <body>
        <h1>Special Button</h1>
        
        <input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
                            onmouseover= 'first'() onmouseout= 'second'();' />
    </body>
</html>

Я пытаюсь заставить свою кнопку перемещаться в середину всякий раз, когда вы наводите на нее курсор, но, похоже, я не могу этого сделать. Это мое кодирование, может кто-нибудь, пожалуйста, помочь мне? Спасибо!

Ответ №1:

Вам нужно position:absolute заставить left свойство css работать. Также я исправил ваш вызов функции в input поле, пожалуйста, проверьте

 <script>
           
            function first()    {
                    let randomValue1 = Math.floor(Math.random()*255);
                    let randomValue2 = Math.floor(Math.random()*255);
                    let randomValue3 = Math.floor(Math.random()*255);
                let randomColor = `rgb(${randomValue1},${randomValue2},${randomValue3})`;
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "100px";                
                document.getElementById('type1').style.backgroundColor= randomColor; 


            }
            
            function second()   {
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "0px";     
                document.getElementById('type1').style.backgroundColor= 'rgb(239, 239, 239)';

            }
        </script>
 
 <input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
                            onmouseover= 'first()' onmouseout= 'second()';' />

Комментарии:

1. Большое вам спасибо! Это очень помогло! Я также хочу, чтобы он менялся на случайные цвета всякий раз, когда я наведу на него курсор, вы случайно не знаете, как это сделать? Спасибо!

Метки: