www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to set hover effect with jquery?

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

    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>
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

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