[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

create hover effect for div

Posted on 2011-09-09
3
Medium Priority
?
495 Views
Last Modified: 2012-05-12
   $(document).ready(function ()
    {
        $('div[class*="catnav"]').css("border", "1px solid blue");        
    });

I want to take this collection and apply a hover effect for the divs...on hover do THIS...on "normal" do THIS....
0
Comment
Question by:Tom Knowlton
  • 2
3 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 36513027
$(document).ready(function ()
    {
        $('div[class*="catnav"]').hover(
            function() { // on hover do THIS
               $(this).css("border", "1px solid blue");        
            },
            function() { // on "normal" do THIS
               $(this).css("border", "5px solid red");        
            }
        )          
            
    });

Open in new window


more info here : http://api.jquery.com/hover/
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36513036
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36513175
Thank you!

[my notes for later]

    $(document).ready(function ()
    {
        $('div[class*="catnav"]').hover(

            function ()
            {
                //$(this).stop().animate({ opacity: 1 }, 1000);
                $(this).css("background-color", "#eeeeee");
            },
            function ()
            {
                $(this).css("background-color", "#fafafa");
            }
            );
    });

Open in new window

0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question