How to hover!!
How to change the button (index.html.erb-above the loop)
<%= link_to "Post a New Status", new_status_path, class: 'btn btn-success' %>
//bootstrap, changing the button
How to give a hover for the edit and delete buttons on the status update(statuses.css.scss):
.status.hover{
background: #FAFAFA; //light grey background
}
.status .admin{
display: none; //will not be displayed on our page
}
.status.hover .admin{ // status and hover will be targeted and .admin should be displayed, using js to add it in
display: inline;
}
When you hover over Mike and George it becomes a light grey color, furthermore edit and delete appear.
JQuery-manipulates web pages; in statuses.js.coffee we have:
$ -> #our page is ready to load
$('.status').hover (event) -> #using hover method grabbing it and telling it what to do when it leaves
console.log("Hover triggered") #
$(this).toggleClass("hover") #wrap this in jQuery and represents status element...use toggle class to hover
