Css 如何使用资源管道在Rails 4中将链接_更改为悬停图像

注：本说明面向初学者

当我将鼠标悬停在图像上时，我面临着无法更改链接中的图像的问题。我在CSS中所做的一切似乎都不能解决这个问题。我在下面介绍我对这个问题的解决方案

这是我的链接到：

  <%= link_to image_tag('1487789814_back.png'),
      {controller: @controller_action_hash_from_params[:controller],
        action: @controller_action_hash_from_params[:action]},
        sql_text: @sql_text,
      :id => "ralph-back-button-black-img", :class => "ralph-fieldset-back-button" %>

我创建了一些jQuery，以便在用户悬停时将黑色箭头更改为红色：

<script type="text/javascript">
  function get_precache_myStruct_array(outer_div_class){
    var myStruct_array = [];
    $('.'+outer_div_class).find(".ralph_preload_class").each(function(){
      var myStruct = {
        id: this.id,
        src: this.src
      };
      // myStruct_array.push(myStruct);
      myStruct_array[this.id] = myStruct;
    });
    return myStruct_array;
  }

  // See http://stackoverflow.com/questions/15352803/how-to-check-if-an-image-was-cached-in-js
  function is_cached(img_url){
    var imgEle = document.createElement("img");
    imgEle.src = img_url;
    return imgEle.complete || (imgEle.width+imgEle.height) > 0;
  }

  $(document).ready(function(){
    var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
    $.each(precache_myStruct_array,
      function (index, value) {
        if (!is_cached(value.src)) {
          alert("Not cached!: " + value.src);
        };
    });

    <% if true %>
      $('#ralph-back-button-filedset').hover(function(){
        var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
        var imageID   = '1487789814_back_red';
        $('#ralph-back-button-black-img > img:nth-child(1)').attr("src", precache_myStruct_array[imageID].src);
      }, function(){
        var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
        var imageID = '1487789814_back';
        $('#ralph-back-button-black-img > img:nth-child(1)').attr("src", precache_myStruct_array[imageID].src);
      });
    <% end %>

  });
</script>

函数get_precache_myStruct_数组（外部div_类）{
var myStruct_数组=[]；
$（'..+外部分区类）。查找（“.ralph\u preload\u class”）。每个（函数（）{
var myStruct={
id:this.id，
src:this.src
};
//myStruct_array.push（myStruct）；
myStruct_数组[this.id]=myStruct；
});
返回myStruct_数组；
}
//看http://stackoverflow.com/questions/15352803/how-to-check-if-an-image-was-cached-in-js
函数被缓存（img\u url）{
var imgEle=document.createElement（“img”）；
imgEle.src=img_url；
返回imgEle.complete | |（imgEle.width+imgEle.height）>0；
}
$（文档）.ready（函数（）{
var precache_myStruct_数组=get_precache_myStruct_数组（“ralph_preload”）；
$。每个（预制结构数组，
函数（索引、值）{
如果（！已缓存（value.src））{
警报（“未缓存！：”+value.src）；
};
});
$（“#拉尔夫后退按钮文件集”）。悬停（函数（）{
var precache_myStruct_数组=get_precache_myStruct_数组（“ralph_preload”）；
var imageID='1487789814_back_red'；
$（“#拉尔夫后退按钮黑色img>img:n个孩子（1）”.attr（“src”，precache_myStruct_数组[imageID].src）；
}，函数（）{
var precache_myStruct_数组=get_precache_myStruct_数组（“ralph_preload”）；
var imageID='1487789814_back'；
$（“#拉尔夫后退按钮黑色img>img:n个孩子（1）”.attr（“src”，precache_myStruct_数组[imageID].src）；
});
});

您可能会注意到jQuery中有一个“/块。由于jQuery是“内联”到.erb文件中的，因此jQuery要经过erb处理。通过将true更改为false，可以使使用浏览器调试器更易于使用

---

结论: 我在网上搜索了一下，找到了我问题的答案。正如律师们所说，我发现没有一个是正确的

---

当然，我乐于接受更正和评论。

如果您将这些图像放在公用文件夹中，它们将不会在图像名称中添加额外的哈希值

说到这里，我在控制器中运行了一个循环，为我的图像获取了所有“Rails”文件名，并将它们存储在我可以轻松访问的地方

<%# This div has display:none.
    We do this in order to preload the images_path as well as create a "map"
      between the friendly name and the asset pipeline name
%>
<div class='ralph_preload'>
  <%= image_tag('1487789814_back.png',      options={class:'ralph_preload_class', id:'1487789814_back'}) %>
  <%= image_tag('1487789814_back_red.png',  options={class:'ralph_preload_class', id:'1487789814_back_red'}) %>
</div>

<div class="ralph_preload">
  <img class="ralph_preload_class" id="1487789814_back" src="/assets/1487789814_back-731afaae70e04062b25988079e4ef8ab4e6b523f4ac11ff7d142a9ff01e63455.png" alt="1487789814 back">
  <img class="ralph_preload_class" id="1487789814_back_red" src="/assets/1487789814_back_red-bbd0f2e34f3401cc46d2e4e1e853d472d8c01c9a75f96d78032738bd01b2133b.png" alt="1487789814 back red">
</div>

.ralph_preload {
  display: none;
}

<script type="text/javascript">
  function get_precache_myStruct_array(outer_div_class){
    var myStruct_array = [];
    $('.'+outer_div_class).find(".ralph_preload_class").each(function(){
      var myStruct = {
        id: this.id,
        src: this.src
      };
      // myStruct_array.push(myStruct);
      myStruct_array[this.id] = myStruct;
    });
    return myStruct_array;
  }

  // See http://stackoverflow.com/questions/15352803/how-to-check-if-an-image-was-cached-in-js
  function is_cached(img_url){
    var imgEle = document.createElement("img");
    imgEle.src = img_url;
    return imgEle.complete || (imgEle.width+imgEle.height) > 0;
  }

  $(document).ready(function(){
    var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
    $.each(precache_myStruct_array,
      function (index, value) {
        if (!is_cached(value.src)) {
          alert("Not cached!: " + value.src);
        };
    });

    <% if true %>
      $('#ralph-back-button-filedset').hover(function(){
        var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
        var imageID   = '1487789814_back_red';
        $('#ralph-back-button-black-img > img:nth-child(1)').attr("src", precache_myStruct_array[imageID].src);
      }, function(){
        var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
        var imageID = '1487789814_back';
        $('#ralph-back-button-black-img > img:nth-child(1)').attr("src", precache_myStruct_array[imageID].src);
      });
    <% end %>

  });
</script>