css 相框 + hover 顯示文字

css

.imgWrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin: 10px;

  .bg1 {
    position: absolute;
    right: -3px;
    bottom: -3px;
    background-color: #E3E3E3;
    width: 100%;
    height: 100%;
    z-index: 91;
  }

  .bg2 {
    position: absolute;
    left: -3px;
    top: -3px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #E3E3E3;
    z-index: 92;
  }

  .imgDiv {
    width: 95%;
    height: 95%;
    position: relative;
    z-index: 98;
  }
}

div.post-photo {
  background-size: 100% 100%;
  height: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: 3px solid #fff;

  .post-content{
      width: 100%;
      height: 200px;
      opacity:0;
      background: #FFF;
  }

  &:hover .post-content{
           opacity:0.5;
           text-align:justify;
           color:#000000;
           font-size:20px;
           font-weight:700;
           font-family:"Times New Roman", Times, serif;
  }
}

html

<div class="postPhoto">
  <div class="imgWrap">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="imgDiv">
      <div>
        <a href="http://localhost:3000/posts/29">
          <div class="post-photo" style="background-image: url(/uploads/post/image/29/london_2423609b.jpg)">
            <div class="post-content">
 要感受英國的魅力，必要到首都倫敦看一下了。倫敦是一個多元化的文化搖籃，約有 700 萬人口，來自 40 個不同的民族。泰晤士河將倫敦大致分為北區和南區，小倫敦（The C..
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

jquery on

jquery binding的問題
當有些html是隨著操作動態產生的時候

如果直接用
('.class').click的話 後續產生的會沒有作用
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
要用

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

turbolinks

來源 http://chloerei.com/2013/07/14/turbolinks-guide/

來源：Rails 4のturbolinksについて最低でも知っておきたい事

用了後
jQuery.ready()會失效

但可以再裝jquery.turbolinks插件
https://github.com/kossnocorp/jquery.turbolinks

Turbolinks 訪問新頁面會觸發5個事件：

page:before-change開始換頁，返回false終止訪問
page:fetch開始訪問新頁面
page:receive已經收到服務器返回，但還沒處理
page:change已切換到新頁面
page:load整個處理完成
而使用瀏覽器歷史返回上一頁的時候，會觸發2個事件：

page:change已切換到緩存頁面
page:restore訪問歷史記錄完畢