将 css 悬停转换为 jquery 悬停 [英] converting css hover to jquery hover
问题描述
我正在建立一个带有悬停效果的网站.查看 http://vitaminjdesign.com/index.html 并查看右下角的服务部分.我正在使用 :hover 来更改背景颜色.我想使用 jquery 以优雅的淡入淡出实现相同的结果.这是我的html:
I am building a website with hover effects. See http://vitaminjdesign.com/index.html and look at the services section in the bottom right. I am using :hover to change the background color. I want to use jquery to acheive the same result with an elegant fade. Here is my html:
<div class="iconrow">
<a href="#"><img src="images/icon1.png" border="0" width="35" />
<h2>Website Design</h2></a>
</div>
(使用不同的图像和文字重复 6 次)
(repeated 6 times with different images and text)
基本上，当 .iconrow 翻转时，我希望背景从无变为背景颜色:#cccccc;当它滚下时，又回到无.
Basically, when .iconrow is rolled over, I want the background to change from none to background-color: #cccccc; and when it is rolled off, back to none.
推荐答案
注意:我通过 Firebug 构建并测试了我的解决方案，以处理您提供的链接.如果您按顺序执行这些步骤，您应该可以完全正常工作
除了 Safari 和 Firefox 3.5 以及其他支持 RGBA 背景颜色的浏览器，您将无法从 transparent 动画到某种颜色.如果您正在寻找跨浏览器支持，那么我会这样解决问题:
You will not be able to animate from transparent to a color except in Safari and Firefox 3.5 and other browsers that support RGBA background colors. If you are looking for a cross browser support, then I would attack the problem like this:
1. 让您的默认悬停效果由非 js 类限定，因此 :hover 效果将作为备用效果.一个很好的方法如下:
1. Have your default hover effects scoped by a non-js class, so the :hover effects will work as a fall-back. A great way to do this is as follows:
<html class="no-js">
<head>
.... meta, title, link tags ...
<script type="text/javascript">document.documentElement.className = "js";</script>
.... other scripts ...
</head>
这会在页面显示之前将 no-js 更改为 js.
This changes no-js to js before the page even displays.
2. 使用 jQuery 在 a 标签旁边添加虚拟元素(js 添加虚拟元素在步骤 3 中)
2. Use jQuery to add dummy elements along side your a tags (js to add the dummy element is in step 3)
这是要使用的 CSS:
Here is the CSS to use:
.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 文件的不透明度.它完全搞砸了透明度.
Finally, be careful if you decide to use an image background instead of the solid color. IE7 and IE8 cannot alter the opacity of 24bit PNG files. It completely screws up the transparency.
这篇关于将 css 悬停转换为 jquery 悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
