2017-03-04 18 views
0

divの背景色を変更するためにjqueryを実行しようとしましたが、このdivの上にマウスを置くと背景色が変わるはずですが、writte bad somethingとdonこの効果を得る'Tついにjquery mouseoverのときのdivの背景色の変更

私のコードは、単純なit'sこのit's:コミュニティに助けを求め

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を、よろしく!

+0

'this'ができます'.css()'を持たないHTMLElementオブジェクトです。代わりに '$(this)'を使用してください。 'this'はjQueryオブジェクトではないため –

+0

です –

答えて

2

のあなたは$(this)thisので返す関数css()を持っていなかったHTML要素を使用する必要があります。
また、this.style.backgroundColor=yellowを使用することもできます。

脱出またはプレーンの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>
では、二重引用符

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

のセット内の単一引用符を使用してくださいまず

1

使用してみてください$(この)の代わりにこの

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

するとあなたは二重引用符を使用している「HTMLでは、単一引用符'は、その属性でを使用しています。

この

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

3番目の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>'; 

それがブラウザに来るとき、それはスニペットのように実行します:

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

関連する問題