Coffeescript添加按钮悬停
Coffeescript添加按钮悬停
提问于 2014-02-04 01:44:41
这是我的设置：
<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中的代码。
有手还醒着吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-04 01:58:01
好的找到了.。其实很简单..。
我将类prf_cover移到shop-banner和coffeescript：
$ ->
$('.prf_cvr_edt').hide()
$('.prf_cover').hover(
-> $(this).find('.prf_cvr_edt').fadeIn(400)
-> $(this).find('.prf_cvr_edt').fadeOut(200)
)Stack Overflow用户
发布于 2014-02-04 02:03:37
更简单的是，不要使用find，因为它并没有做您认为的事情：
$ ->
$('.prf_cvr_edt').hide()
$('.prf_cover').hover(
-> $('.prf_cvr_edt').fadeIn(400)
-> $('.prf_cvr_edt').fadeOut(200)
)find寻找后代，而链接不是，因为您的图像标记关闭了自己。
Stack Overflow用户
发布于 2014-02-04 02:01:10
如果没有严格要求使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21541494
复制相关文章
相似问题
腾讯云开发者
