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,636

    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,671

  3. #3
    Join Date
    Sep 2007
    Posts
    317
    ı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>

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