Javascript hover effect

JavaScript
1

hii
i have used a javascript code for banner transition on a page in which i have give a time span for 8 sec for each banner after which the banner changes.
The banner also changes when the user clicks on any of the banners.

But what i want is to extend it a little further like this:
when the user hovers on any of the banners, the banner should change .

i have used the banner transition code from the following site:http://demo.webdeveloperplus.com/featured-content-slider/
thanks in advance…

2

It looks like that page just uses the jQuery UI framework…

And I think the jQuery UI framework supports tabs opening on mouseover:

Toggle sections open/closed on mouseover with the event option. The default value for event is “click.”


event: 'mouseover'

Can you show us your page as well?

3

Be wary of hover powered effects - hover events don’t get fired by touch devices (androids and iphones). Make sure the user can open the menu by clicking the main item instead of merely hovering on it.

4

As i mentioned above, its not for menu, actually its for banner transition effect.

5

yes, you can refer to the page at

http://www.masterworks.in/gauritech

6

You have this script at about line 17 in your HTML:


	    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
    });

Try adding event: “mouseover” to that first object, so that it looks like this:


	    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle", event: "mouseover"}}).tabs("rotate", 8000, true);
    });
7

thanks for your quick reply.
but this code too does work as i want.

8