Replace dynamic backgrounds on "hover"- Ruby on Rails

Question

I have a div that has a dynamic background image. The background image url is logged in a database. I'd also like to replace this image with a dynamic GIF (which is logged in the same table) when the div is hovered over...but I'm struggling with figuring out a clean way to do this.

Here is a brief snippit from the html.erb file I'm working with...it seems that I cannot use the hover selector in in-line HTML, so I'm not sure if I need to resort to JavaScript? I'd essentially like to replace blah.jpg with blah.gifon:hover.

<% @workout[:image_url] = "blah.jpg" %>
<% @workout[:gif_url] = "blah.gif" %>

<div class="image-wrapper">
  <div class="workout-image" style="background-image:url(<%= @workout[:image_url] %>)">
  </div>
</div>

EDIT: It works now using <script> tags.

<head>
  <script>
    document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover { background-image:url("blah.gif");}</style>');
  </script>
</head>

Unfortunately this is [impossible without JavaScript](http://stackoverflow.com/a/1033166/2341603). Do you have access to JavaScript? — Obsidian Age, Feb 01 '17 at 22:22
Hello @ObsidianAge...thanks for the comment. I can use JavaScript, I'm just a little less savvy with that language, especially when it comes to mixing .erb and .js. Got any links I should check out that might get me on the right track? — brianyates, Feb 02 '17 at 01:22
I'm not familiar with Ruby myself unfortunately, but you basically just need to input the Ruby variable in place of the filename in the JavaScript. in this instance. You need something very similar to (if not exactly) `document.head.insertAdjacentHTML('beforeend', '');` -- that should append CSS styling of `.workout-image{background-image:url("blah.gif");}` to the head section, where presumably your URLs are already defined. — Obsidian Age, Feb 02 '17 at 01:41
Thanks. This was my thought as well...though I'm struggling with how to get the Ruby variable in the JavaScript file...since a plain .js file won't recognize Ruby variables. I think I need to make it a js.erb file, though I can't seem to get that to work... — brianyates, Feb 02 '17 at 04:35
You wouldn't use an external JavaScript file -- you'd embed it in the HTML page using ` — Obsidian Age, Feb 02 '17 at 04:56
I think you're getting me to see the light @ObsidianAge...though it's still not quite working. Would you mind taking a look at the edit I just added? Perhaps my syntax is off? I couldn't get it to work with any new CSS, let alone the new background-image. — brianyates, Feb 03 '17 at 13:54
@ObsidianAge. Never mind...it's working :) I just got rid of the `$(document)` tags and made it `document` like you originally said. Would you mind posting your answer in the answers section so I can mark it as correct? — brianyates, Feb 03 '17 at 14:05
Glad to hear that you got it working :) Yes, `$(document)` would be jQuery, and target the **node**, rather than the `document` element itself. You could get around that with `$(document)[0]` if you really want, but `document` is so much easier :P I've added an answer to include the answer, and also provide an alternative or two that I discovered :) — Obsidian Age, Feb 03 '17 at 19:09

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Unfortunately this can't be solved using raw CSS, as you can't target pseduo-selectors with inline CSS. However, it's possible to get around this using JavaScript. What you need to do is add the following to your page:

<script>
  document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover{background-image:url(<% @workout[:gif_url] %>);}</style>');
</script>

That should append CSS styling of .workout-image{background-image:url("blah.gif");} to the end of the head section.

Another solution would be to simply use an external css.erb file instead of a .css file, in order to process Ruby variables directly:

.workout-image:hover {
  background-image:url(<% @workout[:gif_url] %>);
}

Be aware that using ERB in CSS will only work if the file is loaded ad-hoc, and will not work if you precompile your assets! You can get around this using the SCSS Rails Preprocessor, assuming you have access to, and want to use, SASS.

Hope this helps :)

Replace dynamic backgrounds on "hover"- Ruby on Rails

1 Answers1