Css Rails 4-希望在区域设置中使用悬停图像

我有一个Rails 4应用程序，有三个区域设置。我目前使用image_标记让人们使用标志图像选择他们喜欢的语言

以下是我的Ruby代码：

<%= link_to_unless_current image_tag("english.jpg", alt: "#{t :english}"), locale: "en" %>
<%= link_to_unless_current image_tag("french.jpg", alt: "#{t :french}"), locale: "fr" %>
<%= link_to_unless_current image_tag("spanish.jpg", alt: "#{t :spanish}"), locale: "es" %>

<span class="image-english"><%= link_to_unless_current image_tag("english.jpg", alt: "#{t :english}"), locale: "en" %></span>
<span class="image-french"><%= link_to_unless_current image_tag("french.jpg", alt: "#{t :french}"), locale: "fr" %></span>
<span class="image-spanish"><%= link_to_unless_current image_tag("spanish.jpg", alt: "#{t :spanish}"), locale: "es" %></span>

不幸的是，这不起作用。显示原始图像，但不知何故，在某些地方添加了一些额外的填充。现在，前两个图像在一行上，第三个在另一行上

我不知道从这里到哪里去。我还没有找到任何关于使用与i18n相关的悬停图像的信息

任何帮助都将不胜感激。我会继续寻找

更新CDT时间3014年3月30日下午2:30

我的源代码没有我的类

<div class="row-fluid">
  <img alt="English" src="/assets/english.jpg" />
  <a href="/fr/home"><img alt="French" src="/assets/french.jpg" /></a>
  <a href="/es/home"><img alt="Spanish" src="/assets/spanish.jpg" /></a>
</div><br>

<div class="row-fluid">
  <span class="image-english"><img alt="English" src="/assets/english.jpg" /></span>
  <span class="image-french"><a href="/fr/home"><img alt="French" src="/assets/french.jpg" /></a></span>
  <span class="image-spanish"><a href="/es/home"><img alt="Spanish" src="/assets/spanish.jpg" /></a></span>
</div><br>

我的源代码和我的类

<div class="row-fluid">
  <img alt="English" src="/assets/english.jpg" />
  <a href="/fr/home"><img alt="French" src="/assets/french.jpg" /></a>
  <a href="/es/home"><img alt="Spanish" src="/assets/spanish.jpg" /></a>
</div><br>

<div class="row-fluid">
  <span class="image-english"><img alt="English" src="/assets/english.jpg" /></span>
  <span class="image-french"><a href="/fr/home"><img alt="French" src="/assets/french.jpg" /></a></span>
  <span class="image-spanish"><a href="/es/home"><img alt="Spanish" src="/assets/spanish.jpg" /></a></span>
</div><br>

---

除了链接图像标记周围的跨度标记外，这两个标记之间的标记没有区别。我决定注释掉hover和active的语句，然后再试一次。我还有多余的填充物。图像后面没有空格。我的样式表中没有其他定制图像的CSS代码。我在Safari、Chrome、Firefox和Opera中也有同样的结果。我甚至添加了

padding left:0px；右边填充：0px到我的类，但得到了相同的结果。
我认为第一步应该是使用给定浏览器的web inspector（这是的链接）来观察页面上创建的标记（当有额外的填充时）。我刚刚在上面添加了我的标记。在图像url（“french_hover.jpg”）中删除引号，我认为这是文字与相对的关系。刚为我工作过me@bobbdelsol，谢谢你的建议。我在考试中遇到了另一个问题，所以现在我只做英语逻辑题。一旦我解决了这个问题，我会加上法语和西班牙语，并测试你的建议。我会让你知道它是如何工作的。