如何实现淡入的悬停效果 [英] how to implement hover effect that fades in

问题描述

当您将鼠标悬停在左侧(上一个功能)时，它会滑入并变暗，而右侧则变黑

when you hover over the left side (previous function) slides in and fades darker and vice versa for the right

到目前为止，这是我对Deleteman的感谢

here's what I got so far thanks to Deleteman

http://jsfiddle.net/pQzWp/

推荐答案

我会尝试执行以下操作:

I would try to do the following:

在保存图像的块元素内，添加两个块元素，如下所示:

Inside the block element that holds the image, add two block elements like this:

 #element1 {
 position:absolute;
 left:0; 
 top:0
 width:30%;
 height:100%; 
}

 #element2 {
  position:absolute;
  right:0;
  top:0
  width:30%;
  height:100%;
 }

然后将图像容器的位置设置为相对".

And the position of the image container, set it the position to be "relative".

现在，您可以设置如下事件:

Now, you can set events like this:

$("#element1").mouseover(function() {
    //show "prev" link
 });

$("#element2").mouseover(function() {
  //show "next" link
 });

希望有帮助！

修改

检查一下: http://jsfiddle.net/pQzWp/7/

将您的框架更改为JQuery，因为我对mootools的了解不多，因此您可以根据需要更改fadeIn和fadeOut效果.

Changed your framework to JQuery, since I don't know much about mootools, you can change the fadeIn and fadeOut effect for whatever you want.

这篇关于如何实现淡入的悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！