www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to set hover effect with jquery?

Hybrid View

  1. #1
    Join Date
    Sep 2005
    Posts
    1,626

    How to set hover effect with jquery?

    How to set hover effect with jquery?
    PHP Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml"><head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    title>ExampleJavascript Code to show a hidden element</title>
    <
    script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    $('a').click(function(){
        $('.section').hasClass('hoverable') ? $('.section').removeClass('hoverable') : $('.section').addClass('hoverable')
    })
    /*]]>*/
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    .object{
        width: 100px;
        height : 100px;
        margin :40px;
        background-color:blue;
    }

    .hoverable .object:hover{
        background-color : yellow;
        cursor : pointer;
    }
    /*]]>*/
    </style>
    </head>
    <body>

    <div class="section">
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
    </div>
    <a href='#'>Toggle hover</a>

    </body>

    </html> 

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Sep 2007
    Posts
    315
    ıf I understand

    $('a').hover(
    Code:
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Example: Javascript Code to show a hidden element</title>
    <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // http://www.sitepoint.com/forums/showthread.php?826197-Show-Hide-Multiple-Divs&p=5053586&highlight=#post5053586
    // http://www.webdeveloper.com/forum/showthread.php?279499-How-to-set-hover-effect-with-jquery
    // http://www.webdeveloper.com/forum/showthread.php?256433-Translator-Script
    
    $(document).ready(function(){
    $('a').hover(function(){ //  alert('mesaj var');
        $('.section').toggleClass('hoverable');
    }); 
    }); 
    /*]]>*/
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    .object{
        width: 100px;
        height : 100px;
        margin :40px;
        background-color:blue;
    }
    
    .hoverable {
        background-color : yellow;
        cursor : pointer;
    }
    /*]]>*/
    </style>
    </head>
    <body>
    
    <div class="section"> la havle ve la kuvvete illa billahil aliyyil azim. Allah'tan başka güç ve kuvvete sahip hiç kimse yoktur.
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
    </div>
    <a href='#'>Toggle hover</a>
    
    </body>
    </html>
    The Time Through Ages
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles