jQueryでcssを初期値設定した時、マウスホバー時のcssを適用したい

Question

実現したいことは「初期値をjQueryで設定したい」

<style>
 #test {
   width: 100px;
 }
 #test:hover {
   width: 200px;
 }
</style>
<script>
  $("#test").css("width",150);
</script>
<div id="test">test</div>
```このように設定した場合、マウスホバーしても#testはサイズは変更しません。
```html
<div id="test" style="width:150px">test</div>
```となっているためです。
処理とはしてはもちろん正常です。

マウスホバーしたときは 200px という変化を適用したいのですが、良い方法はあるでしょうか？
ホバー時の処理もjQueryで書くしかないように思えるのですが、styleのcssを上書きする方法はあるのだろうかと思い、質問させていただきました。

よろしくお願いします。

Answer 1

セレクタの優先順位の概念を覚えてください。
http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

その上で現ソースの不具合と、!importantの使いどころがわかるかと思います。

Answer 2

！important
を、書く。
どこに書くのかはしらべてください。

Comments

[退会済みユーザー]

!important を忘れていました。ありがとうございます。