将css悬停转换成jquery悬停 [英] converting css hover to jquery hover
问题描述
我正在建立一个悬停效果的网站。请参阅 http://vitaminjdesign.com/index.html 并查看右下方的服务部分。我正在使用：悬停来更改背景颜色。我想用jquery以优雅的淡入淡出来获得相同的结果。这是我的HTML：
< div class =iconrow>
< a href =＃>< img src =images / icon1.pngborder =0width =35/>
< h2>网站设计< / h2>< / a>
< / div>
（用不同的图片和文字重复6次）
基本上，当.iconrow翻转时，我希望背景从无变为背景颜色：#cccccc;当它滚下来时，回到没有。
注意：我通过Firebug构建并测试了我的解决方案，以处理您提供的链接。如果您按顺序执行这些步骤，则应完全运行
您将无法通过透明制作动画
1。一个非js类，所以：hover 效果将作为一个后退。一个很好的方法如下：
< html class =no-js>
< head>
.... meta，title，link tags ...
< script type =text / javascript> document.documentElement.className =js;< / script>
....其他脚本...
< / head>
这将 no-js 更改为 js 在页面显示前显示。 您的 a 标记（ js 添加虚拟元素在步骤3中）
这是要使用的CSS：
.js .iconrow {background：none！important} / *隐藏当前的悬停效果* /
.iconfader {
position：absolute;
display：block;
剩下：0;
top：0;
宽度：100％;
身高：100％;
-webkit-border-radius：10px;
-moz-border-radius：10px;
background-color：#ccc;
z-index：5;
}
.iconrow {position：relative} / *跨度是绝对的，需要父对象是相对的* /
.iconrow a {position：relative; z-index：10} / *需要坐在最上面* /
3. 淡入淡出 mouseenter 和 mouseleave $上的新元素b $ b
$（'。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文件的不透明度。它完全消除了透明度。
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>
(repeated 6 times with different images and text)
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.
Note: I built and tested my solution via Firebug to work on the link you provided. If you follow these steps in order, you should have it fully working
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. 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>
This changes no-js to js before the page even displays.
2. Use jQuery to add dummy elements along side your a tags (js to add the dummy element is in step 3)
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. Fade in and out the new dummy element on mouseenter and 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);
});
});
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屋！
