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 Ben Bastow
Ben Bastow
24,657 Points

.Hover

Hello..

I am having troubles with the .hover thing in the Ruby on rails interaction video..

can you help me to get it to work?!

here is all the code for the different bits!

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

^^ Coffee script




```.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;
}

^^ Css (statuses)

(tell me if u need any more code!)

6 Answers

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

What troubles are you having? It helps us help you if you tell us what it's doing and what you want it to do along with your code =)

Ben Bastow
Ben Bastow
24,657 Points
Ben Bastow
Ben Bastow
24,657 Points

basically i want it to when u hover over it shows the edit and delete links. and it goes to a bg of FAFAFA but it doesn't.. cause it doesn't work and i dont know why :(

Mark Lavelle
Mark Lavelle
2,910 Points
Mark Lavelle
Mark Lavelle
2,910 Points

I had the same problem, I just switched the CSS. .status .admin { display: none; } .status.hover .admin { display: inline; } from this ^^ to .status .admin { display: inline; } .status.hover .admin { display: none; }

Ben Bastow
Ben Bastow
24,657 Points
Ben Bastow
Ben Bastow
24,657 Points

hey! Thanks mark but it still doesn't work..... do you know why? would u like a link to my git hub?

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points
John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Ben,

Your code seems correct. The only thing I can think of is where you have positioned your elements. They should be within the 'meta' div and within the 'admin' span:

<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>
Emanuel Ashiedu
Emanuel Ashiedu
1,084 Points
Emanuel Ashiedu
Emanuel Ashiedu
1,084 Points

Hi Ben,

Did you fixed the problem yet? If no, check that your span class="admin is within the div class="meta and div class="meta" is within div class="status" as thus -

<% @statuses.each do |status| %>
<div class="status">
  <br>
<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 %>

Also, 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;
}