4

マウスオーバーで画像を変更したいリンクされたimage_tagがあります。私は次のように動作すると思っていましたが、マウスオーバーで画像が切り替わっていません:

<%= link_to image_tag("new_step.png"),new_project_step_path(@project), :class=> "newStep", :onmouseover => "new_step_highlighted.png"%>

cssも編集してみましたが、残念ながらこれもうまくいきませんでした：

.newStep{
    background: url('../assets/new_step_highlighted.png');
}

.newStep:hover{
    background: url('../assets/new_step_highlighted.png');
}

どちらの場合も、画像「new_step.png」のみが表示されます。どうすればこれを修正できますか? よろしくお願いします。

4

3 に答える 3

8

CSS のみの場合、両方の画像をlink_toタグ (実際にはaタグ) の背景プロパティとして使用する必要があります。あなたが書いたもので、1つの画像をdomに「ハードコード」し、リンクの背景プロパティの原因を実際にクラスimage_tagに変更しようとしました。newSteplink_to

<%= link_to "Text", new_project_step_path(@project), :class => "newStep" %>

次にcss（ところで、アセットフォルダーへのパスに「..」を追加する必要はありません）：

.newStep {
    display: inline-block;
    width: your-image-width;
    height: your-image-height;
    background: url('/assets/new_step.png');
}

.newStep:hover {
    background: url('/assets/new_step_highlighted.png');
}

ここでフィドル：http://jsfiddle.net/km6Sp/

于 2013-02-01T18:19:35.433 に答える
0

私の画像パスが実際には「/assets/new_step.png」であったことを除いて、Sparda の応答は正しかったことがわかりました。CSS ファイルに問題があるため、画像が表示されませんでした。

于 2013-02-04T03:04:26.887 に答える