我有一个 div具有动态背景图像。背景图像 url 记录在数据库中。当 div 出现时，我还想用动态 GIF(记录在同一个表中)替换此图像。悬停在...但我正在努力寻找一种干净的方法来做到这一点。
这是我正在使用的 html.erb 文件的一个简短片段……看来我不能使用 hover内联 HTML 中的选择器，所以我不确定是否需要求助于 JavaScript？我基本上想替换 blah.jpg与 blah.gif on:悬停。
<% @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>
编辑:
现在可以使用 <script>标签。
<head>
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover { background-image:url("blah.gif");}</style>');
</script>
</head>
最佳答案
不幸的是，这无法使用原始 CSS 解决，就像您一样 can't target pseduo-selectors with inline CSS .但是，可以使用 JavaScript 来解决这个问题。您需要做的是将以下内容添加到您的页面:
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover{background-image:url(<% @workout[:gif_url] %>);}</style>');
</script>
这应该将 .workout-image{background-image:url("blah.gif");} 的 CSS 样式附加到头部部分的末尾。
另一种解决方案是简单地使用外部 css.erb 文件而不是 .css 文件，以便直接处理 Ruby 变量:
.workout-image:hover {
background-image:url(<% @workout[:gif_url] %>);
}
请注意，只有在临时加载文件时，在 CSS 中使用 ERB 才有效，如果您预编译您的 Assets ，则不会有效!您可以使用 the SCSS Rails Preprocessor 解决此问题，假设您有权访问并想要使用 SASS。
希望这有帮助:)
关于html - 替换 "hover"上的动态背景 - Ruby on Rails，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41990885/