Question

这就是我的设置：

<header class="shop-banner">
    <img src="http://i.imgur.com/5jSh4fI.jpg" style="height: 250px" class="prf_cover">
    <!-- when user hovers -->
    <%= link_to "Edit Cover", edit_user_registration_path, class: "btn btn-custom prf_cvr_edt" %>
  </header>

我需要将鼠标悬停在图像上，按钮才能显示。

我试过

jQuery ->
  jQuery(".prf_cvr_edt").hide()
  jQuery(".prf_cover").hover (->
    jQuery(this).find(".prf_cvr_edt").fadeIn 1
  ), ->
    jQuery(this).find(".prf_cvr_edt").fadeOut 1

因为这会隐藏按钮，但在悬停时不会褪色。我需要coffeescript中的代码。

任何伸出援助之手仍然醒着？

Answer 1

好的发现它......实际上非常简单..

我将课程prf_cover移到shop-banner和我的咖啡脚：

$ ->
  $('.prf_cvr_edt').hide()
  $('.prf_cover').hover(
    -> $(this).find('.prf_cvr_edt').fadeIn(400)
    -> $(this).find('.prf_cvr_edt').fadeOut(200)
  )

Answer 2

更简单，省略find，因为它没有按照您的想法行事：

$ ->
  $('.prf_cvr_edt').hide()
  $('.prf_cover').hover(
    -> $('.prf_cvr_edt').fadeIn(400)
    -> $('.prf_cvr_edt').fadeOut(200)
  )

find查找后代，但链接不是，因为您的图片代码会自行关闭。

Answer 3

如果严格要求使用JavaScript，则应尝试使用CSS，它还具有硬件加速的额外好处。使用您当前的HTML结构应该可以起作用：

.prf_cvr_edt {
  opacity: 0;
  transition: opacity .5s linear;
}
.prf_cover:hover + .prf_cvr_edt {
  opacity: 1;
}

演示：http://dabblet.com/gist/8796194

Coffeescript在悬停时添加按钮

3 个答案: