Skip to content

Instantly share code, notes, and snippets.

@usualoma

usualoma/hover.html.erb

Created December 2, 2015 20:24
Show Gist options
  • Save usualoma/7937b806a097b55e6e8f to your computer and use it in GitHub Desktop.
Save usualoma/7937b806a097b55e6e8f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hover.html.erb
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {
display: block;
width: 10px;
height: 10px;
position: absolute;
z-index: 1;
}
#bird {
position: absolute;
background-image: url(./images/bird.png);
width: 36px;
height: 26px;
top: 85px;
left: 85px;
}
<% 0.upto(20) do |i| %>
<% 0.upto(20) do |j| %>
#cell-<%= j %>-<%= i %> {
left: <%= i * 10 %>px;
top: <%= j * 10 %>px;
}
#cell-<%= j %>-<%= i %>:hover {
background: rgb(230, 0, 0);
}
#cell-<%= j %>-<%= i %>:hover ~ #bird {
transform: rotate(<%= Math::atan2((j-10)*10, (i-10)*10) * 180 / Math::PI %>deg);
}
<% end %>
<% end %>
</style>
</head>
<body>
<% 0.upto(20) do |i| %>
<% 0.upto(20) do |j| %>
<a id="cell-<%= i %>-<%= j %>" href="#"></a>
<% end %>
<% end %>
<div id="bird"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment