Coffeescript 函数在 Rails 应用程序中根本不起作用

Question

我被难住了...我想在我的应用程序中添加一个小的 CSS/JS 细节。我有一个应用程序，用户可以在其中创建许多帖子。我正在尝试添加功能，一旦用户将鼠标悬停在帖子上，帖子应该会触发漂亮的背景颜色。我已经检查了所有内容，但没有发现我做错了什么。

我在我的样式表目录下设置了一个post.js.coffee 文件。我还在application.scss 文件中添加了css 样式。我的application.js 文件连接到需要一些JS，在我的posts 文件夹下的views 文件夹中，我在我的索引模板中迭代@post，这是我想要激活悬停背景触发器的地方。非常感谢任何帮助。

宝石文件-

source 'https://rubygems.org'

gem 'rails', '4.0.0'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass', '~> 2.3.2.0'
gem 'will_paginate'
gem 'bootstrap-will_paginate'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
gem 'bcrypt-ruby', '= 3.0.1'
gem 'font-icons-rails', :git=> 'git://github.com/shorelabs/font-icons-rails.git'

group :doc do
  gem 'sdoc', require: false
end

group :development do
  gem 'quiet_assets'
  gem 'pry'
  gem 'sqlite3'
end

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

发布 index.html.erb 文件 -

<div class="page-header">
  <h2>Welcome<small> - <%= current_user.username %>, start posting!</small></h2>
</div>

<% @posts.each do |post| %>
  <div id="posts_feed">
      <h3><%= link_to post.title, post_path(post)%></h3>
      <h4><%= post.description %></h4>

      <div id="votes">
        <%= link_to '', vote_post_path(post, vote: true), method: 'post', remote: true, class: "icon-fa-arrow-up" %>
        <span id="post_<%=post.id%>_votes"><%= post.total_votes %></span>
        <%= link_to '', vote_post_path(post, vote: false), method: 'post', remote: true, class: "icon-fa-arrow-down" %>
      </div>

      <small class="muted">
        <% if post.comments.count.to_s == "1" %>
          <%= post.comments.count %> <%= link_to "comment", post %>
        <% else %>
          <%= post.comments.count %> <%= link_to "comments", post %>
        <% end %>
        | posted by <%= link_to post.creator.username %> <%= time_ago_in_words(post.created_at) + ' ago' %>
        <% if logged_in? && (post.creator == current_user) %> |
          <%= link_to "edit", edit_post_path(post) %>
          | <i class="icon-fa-user"></i>
        <% end %>
      </small>
  </div>
<% end %>
<%= will_paginate @posts %>

application.js 文件 -

// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap

posts.js.coffee -

$ ->
  $('.post').hover (event) ->
    $(this).toggleClass("hover")

application.scss -

 .post.hover {
  background: red;
 }

Answer 1

是否有特定的理由将 coffescript 用于悬停状态？为什么不直接使用 CSS？

.post:hover {
background: red;}