Блог

Я использовал тег marquee на своем Home.js досье на react.js результирующий атрибут в теге marquee не работает должным образом или не дает никакого эффекта.

Я добавил тег для публикации моих новостей на моем веб-сайте, который будет остановлен при наведении курсора мыши и снова запущен при наведении курсора мыши.

На самом деле, он не работает, пока я проверяю его в браузере.

но другие атрибуты, такие как scroolamount и direction, работают правильно.

импортируйте React из ‘react’; импортируйте ‘./Home.css’;

 export default function Home() {
    return (
        <div>
            <div className="title">

            <marquee behavior="scroll" direction="">
            <a href=""> <h5> Welcome to my page. Visit regularly to obtain useful information </h5> </a>
            </marquee>
            </div>

            <div className="main-content">
                <div className="content">
                <div className="overview">
                    <h3>Overview</h3>
                    <div className="video-section">
                        <iframe  width="640" height="360" src="https://www.youtube.com/embed/opYAyx1Humc?autoplay=0" frameborder="0" allowfullscreen></iframe>
                            {/* <video>
                                <source src="https://www.youtube.com/watch?v=ioblgpA5eTo" type="video/youtube"/>
                            </video> */}
                    </div>
                    <div className="text-section">
                        <p> 
                        Computer science is the study of computation and information.[1][2] Computer science deals with theory of computation, algorithms, computational problems, and the design of computer systems hardware, software, and applications.[3][4] Computer science addresses both human-made and natural information processes, such as communication, control, perception, learning, and intelligence, especially in human-made computing systems and machines.[5][6][7]

                        
                    </div>

                    </div>
            

            
                <div className="newsbar-side">

                            <h3>News amp; Updates</h3>

                
                ***<marquee behavior="scroll" direction="up" scrollamount="4"  
                  onmouseover="this.stop();"  onmouseout="this.start();">***

                



                    <p>Inside the White House Event Now Under Covid Scrutiny</p>
                    <p>Inside the White House Event Now Under Covid Scrutiny</p>
                    <p>Inside the White House Event Now Under Covid Scrutiny</p>
                    <p>Inside the White House Event Now Under Covid Scrutiny</p>
                   Scrutiny</p>

                </marquee>


                </div>
                </div>
                

                <div className=""></div>

            </div>
            
        </div>
    )
}
  

Согласно документу

События React именуются с использованием camelCase, а не в нижнем регистре.

Так что в вашем случае это должно быть

 <marquee behavior="scroll" direction="up" scrollamount="4"  
                  onMouseOver="this.stop();"  onMouseOut="this.start();">