onmouseover for link_to image_tag

我有一個鏈接的image_tag，我想更改mouseover上的圖像。我想下面的工作，但圖像沒有接通鼠標懸停：onmouseover for link_to 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」出現。我將如何解決這個問題？在此先感謝您的幫助！

來源

2013-02-01 scientiffic

使用CSS只，你需要有作爲link_to標籤（實際上是a標籤）的背景屬性兩個圖像。用你寫的，你有一個圖像「硬編碼」進入dom與image_tag，你試圖改變鏈接的背景屬性原因newStep實際上是link_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-01 18:19:35 Raindal

感謝您的幫助。我剛剛嘗試過，當我加載頁面時沒有圖像出現。我使用鉻檢查器，發現圖像路徑實際上是assets/new_step.png，所以我將我的css文件更改爲url（'/ assets/new_step.png「），但圖像仍未出現... – scientiffic

這是你的圖片url路徑中的一個錯字，單引號在開頭，雙引號在結尾？在巡視員中，當你點擊圖片鏈接時，圖片是否出現？ – Raindal

哎呀，是的，那是一個錯字;兩端應該有雙引號，當我點擊CSS中的「new_step.png」圖片鏈接時，new_step.png會出現，看起來並沒有在頁面加載時加載new_step_highlighted.png。在CSS中的圖像鏈接似乎工作，圖像本身不會出現在頁面上 – scientiffic

事實證明，Sparda的回答是正確的，只是我的圖像路徑實際上只是「/assets/new_step.png」。圖像沒有出現，因爲我的CSS文件存在問題。

來源

2013-02-04 03:04:26 scientiffic

woops，因此編輯我的答案; ） – Raindal

你可以不用修改CSS，用更少的代碼：

<%= link_to some_route_path do 
    image_tag("find.png", onmouseover: "this.src='#{asset_path('find_sel.png')}'", onmouseout: "this.src='#{asset_path('find.png')}'") 
end %>

來源

2014-03-06 19:05:06

這是老派突出的JS，可能應該避免，但在這種情況下，這是'image_tag'的'：mouseover'選項用於Rails 4的操作。即使我沒有使用它，它的工作原理，所以你應該得到一個upvote。 – Unixmonkey

也簡潔。同上upvote – Jerome

onmouseover for link_to image_tag

回答

相關問題