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

Question

我尝试执行jquery来改变div的背景颜色，但是所有内部的PHP代码，当把鼠标放在这个div上时应该改变背景的颜色，但我认为写错了什么并且最终没有得到这个效果

我的代码很简单，就是这样：

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

感谢社区的帮助，问候!!!

Answer 1

您应该使用$(this)，因为this会返回一个没有css()功能的HTML元素。
或者，您可以使用this.style.backgroundColor=yellow。

  

请在一套双引号内逃脱或使用单引号

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在纯JavaScript中

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用$（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

<强>首先

当您在html中使用双引号＆＃34; 时，请在其属性中使用单引号＆＃39; 。

此

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

应该是：

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

<强>第二

由于php代码也使用单引号所以在php中的单引号之前使用反斜杠：

示例：

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

第三，javascript中没有css（）这样的属性，请使用this.style.backgroundColor：

所以你的代码最终成为：

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

对于浏览器，它将像代码段一样运行：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;