Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Posted by Chris Beyer
Chris Beyer
425 Points

Problem with hover over on Ruby on Rails Interactivity

2 div tags and 1 span tag not showing at bottom.

I have still been able to get the hover effect . The disappear and reappear on rollover/

It is like the coffee script is not working right. Is there a way to see if it is bring pulled in on load? Statuses.css.scss:

.status {
    border-bottom: solid 1px #CCC;
    padding: 5px 0;
 }

 .status p {
        margin: 4px 0;
 }

.status.hover {
    background: #FAFAFA;
}

.status .admin {
    display: none;      
 }

.status.hover .admin {
    display: inline;
}

Statuses.js.coffee:

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

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

Index.html.erb:

<div class="page-header">
<h1> All of the Statuses</h1>
</div>

<%= link_to "Post a New Status", new_status_path %>

<% @statuses.each do |status| %>
<div class="status">
<strong><%= status.name %></strong>
<p><%= status.content %></p>
<div class="meta">
<%= link_to time_ago_in_words(status.created_at)+ " ago ",status %>
  <span class="admin">
    | <%= link_to "Edit", edit_status_path(status) %> |
    <%= link_to "Delete", status, method: :delete, data: { confirm: "Are you sure you want to delete this status?"} %>
</span>
</div>
</div>

<% end %>

Everything seed correct.

Thanks,

Chris

Ian Warner
Ian Warner
5,563 Points

Hey Chris, I had the same problem but unfortunately I never found a solution. I just removed the following line:

.status .admin { 
    display: none;
}

Once you remove that line the "edit & delete" links return. I decided to remove it because it wasn't a critical step stopped me from moving on in the treebook project.

Ian.

2 Answers

Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

The problem here is a quick typo in a couple of your rules. hover is a pseudoelement that refines what you're selecting by choosing a special aspect of the element to style. In the case of hover, it styles the element while the mouse is hovered over it. Pseudoelement selectors always begin with a colon, like :hover. In your stylesheet, you need to change the hover selectors from .hover to :hover.

.status {
    border-bottom: solid 1px #CCC;
    padding: 5px 0;
 }

 .status p {
        margin: 4px 0;
 }

.status:hover {
    background: #FAFAFA;
}

.status .admin {
    display: none;      
 }

.status:hover .admin {
    display: inline;
}

Does that fix the issue for you?

Chris Beyer
Chris Beyer
425 Points

Thanks Alan, works right away now.

Chris

Innokenty Rozenberg
Innokenty Rozenberg
200 Points
Innokenty Rozenberg
Innokenty Rozenberg
200 Points

awesome worked for me as well!