I'm trying to hide the text Following
when a user hovers over a button. I don't really have too much experience with CSS and am having difficulties doing this.
This is my button
<span>
<%= link_to 'Following', follow_url(found), method: :delete,
class: "btn unfollow-button", id: 'unfollow-button',
data: { confirm: 'Are you sure?' }
%>
</span>
Below is the application.scss
.unfollow-button {
width: 100px; /* set a width so it doesnt change upon hover */
content: 'Following';
border-color: #bd2b2b;
background-color: #140d6d;
color: white;
margin-left: 20px;
&:visited, &:focus, &:hover {
content: 'Following';
border-color: #FF0000;
background-color: #FF0000;
color: white;
}
}
.unfollow-button:hover span {
display:none
}
.unfollow-button:hover:before {
content:" Unfollow ";
}
Right now the button is appending the new content Unfollow
to the front of the button, but not removing the old content
So the button goes from Following
to Unfollow Following
instead of the desired result of Following
to UnFollow
Any help would be greatly appreciated. Thanks!
Aucun commentaire:
Enregistrer un commentaire