鼠标悬停时jQuery更改div的背景颜色

Question

I try execute jquery for change background color of div , but all inside php code , and when put the mouse over this div should change color of background , but i think writte bad something and don´t get this effect finally

My code it´s simple and it´s this :

   echo '<div id="rating_poll_front" onmouseover="this.css("background-color","red")" onmouseleave="this.css("background-color","yellow");" style="background-color:yellow;"></div> ';

Thank´s for the help to community , Regards !!!

Answer 1

You should use $(this) because this returns an HTML element which didn't have the function css() .
Alternatively, you can use this.style.backgroundColor=yellow .

Please escape or use single quote inside a set of double quote

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="rating_poll_front" onmouseover="$(this).css('background-color','red')" onmouseleave="$(this).css('background-color','yellow');" style="background-color:yellow;">dsfdsf</div> 

In plain JavaScript

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="rating_poll_front" onmouseover="this.style.backgroundColor='red';" onmouseleave="this.style.backgroundColor='yellow';" style="background-color:yellow;">dsfdsf</div> 

Answer 2

尝试使用$（this）代替this

echo '<div id="rating_poll_front" onmouseover="$(this).css(\'background-color\',\'red\')" onmouseleave="$(this).css(\'background-color\',\'yellow\');" style="background-color:yellow;"></div> ';

Answer 3

First:

When you are using double quotes " in html use single quotes ' in its attributes.

This

<div id="rating_poll_front" onmouseover="this.css("background-color","red")" onmouseleave="this.css("background-color","yellow");" style="background-color:yellow;"></div>

Should be:

<div id="rating_poll_front" onmouseover="this.css('background-color','red')" onmouseleave="this.css('background-color','yellow');" style="background-color:yellow;"></div>

Second:

As the php code is also using single quotes so use a backslash before the single quote inside php:

Example:

echo '<div id="rating_poll_front" onmouseover="this.css(\'background-color\',\'red\')" onmouseleave="this.css(\'background-color\',\'yellow\');" style="background-color:yellow;"></div>';

Third there is no such property as css() in javascript, use this.style.backgroundColor:

So your code finally becomes:

echo '<div id="rating_poll_front" onmouseover="this.style.backgroundColor=\'red\';" onmouseleave="this.style.backgroundColor=\'yellow\';" style="background-color:yellow;">Hello</div>';

When it comes to browser it will run like the snippet:

 <div id="rating_poll_front" onmouseover="this.style.backgroundColor='red';" onmouseleave="this.style.backgroundColor='yellow';" style="background-color:yellow;">Hello</div>