将 css 悬停转换为 jquery 悬停
Posted
技术标签:
【中文标题】将 css 悬停转换为 jquery 悬停【英文标题】：converting css hover to jquery hover 【发布时间】：2010-12-23 11:53:47 【问题描述】：我正在建立一个带有悬停效果的网站。请参阅http://vitaminjdesign.com/index.html 并查看右下角的服务部分。我正在使用 :hover 来更改背景颜色。我想使用 jquery 以优雅的淡入淡出实现相同的结果。这是我的html：
<div class="iconrow">
<a href="#"><img src="images/icon1.png" border="0" />
<h2>Website Design</h2></a>
</div>
（使用不同的图像和文字重复 6 次）
基本上，当 .iconrow 翻转时，我希望背景从无变为背景颜色：#cccccc;当它滚下时，又回到无。
【问题讨论】：
【参考方案1】：您需要 jquery 颜色动画插件：http://plugins.jquery.com/project/color
然后是这样的一些代码
$(".iconrow").hover(
function()
$(this).animate( "background-color": "#ccc" , normal );
,
function()
$(this).stop(true, true).animate( "background-color": "#fff" , normal );
);
编辑：
根据 dcneiner 的评论，如果您希望最终颜色为无，则必须在动画完成后向动画添加回调函数以将颜色更改为“无”。我猜动画到“无”是未定义的。您可以将 #fff 更改为接近背景的颜色，以帮助平滑最终过渡。
动画签名是：
animate(params, [duration], [easing], [callback])
【讨论】：
jQuery UI 还允许您为背景颜色设置动画 @Joel OP 想要从none 变为完全透明的颜色。这种类型的动画对他没有帮助。此外，您需要引用background-color 或使用backgroundColor。您当前的代码是无效的 JS。
@dcneiner：谢谢。至于“none”，你可以通过回调函数非常接近。
是的，这行不通。感谢您的评论
它不会这样做，因为背景是透明的 png，没有颜色可以完美匹配。【参考方案2】：
注意：我通过 Firebug 构建并测试了我的解决方案，以处理您提供的链接。如果您按顺序执行这些步骤，您应该可以完全正常工作
除了 Safari 和 Firefox 3.5 以及其他支持 RGBA 背景颜色的浏览器，您将无法从 transparent 动画到颜色。如果您正在寻找跨浏览器支持，那么我会这样解决问题：
1. 将默认悬停效果设置为非 js 类的范围，因此 :hover 效果将作为备用效果。一个很好的方法如下：
<html class="no-js">
<head>
.... meta, title, link tags ...
<script type="text/javascript">document.documentElement.className = "js";</script>
.... other scripts ...
</head>
这会在页面显示之前将no-js 更改为js。
2.使用jQuery在a标签旁边添加虚拟元素（js添加虚拟元素在步骤3中）
这是要使用的 CSS：
.js .iconrow background: none !important /* Hide current hover effect */
.iconfader
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #ccc;
z-index: 5;
.iconrow position: relative /* Spans are absolute, need the parent to be relative */
.iconrow a position: relative; z-index: 10 /* Needs to sit on top */
3. 淡入淡出mouseenter 和mouseleave 上的新虚拟元素
$('.iconrow').each(function()
var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
$(this).hover(function()
$span.stop().animate(opacity: 0.8, 200);
, function()
$span.stop().animate(opacity: 0.0, 200);
);
);
最后，如果您决定使用图像背景而不是纯色，请小心。 IE7 和 IE8 无法更改 24 位 PNG 文件的不透明度。它完全搞砸了透明度。
【讨论】：
这似乎也没有。我正在寻找一个非常简单的悬停效果。当您翻转 div 时，该 div 将其背景颜色从一种更改为另一种。它随着简单的淡入淡出而变化。有其他方法吗？ @JCase11 您没有从一种颜色更改为另一种颜色。您正在从no color 更改为颜色。这需要仅在少数浏览器中支持的颜色的 alpha 透明度。我不确定什么不起作用，因为我测试了它并相信我得到了你想要的效果。让我贴一些代码，给我 5。
@JChase11 这两个页面之一做你想要的吗？ pixelgraphics.s3.amazonaws.com/***/1851141/vjd1.html 或 pixelgraphics.s3.amazonaws.com/***/1851141/vjd2.html 。我猜是第二个链接。请说明您想要的有何不同，以便我们提供更好的帮助。此外，您的 scripts.js 文件正在调用 mc.init()，这会引发错误，导致页面上的代码块无法正常工作。
@JChase11 顺便说一句，您的设计进展顺利。真的很好看！
第二个是正确的！非常感谢您的客气话和帮助。以上是关于将 css 悬停转换为 jquery 悬停的主要内容，如果未能解决你的问题，请参考以下文章