Question

我在这里难过......我想在我的应用程序中添加一个小的和小的CSS / JS细节。我有一个应用程序，用户可以创建许多帖子。我试图添加功能，一旦用户将鼠标悬停在帖子上，帖子应触发漂亮的背景颜色。我检查了一切，但我看不出我做错了什么。

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

Gemfile -

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

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

.post:hover {
background: red;}

Coffeescript函数根本不适用于Rails应用程序

1 个答案: