how to show some information when the image is hovered and display some content when it is clicked

how to show some information when the image button is hovered and display some content when it is clicked .

please refer the below link . how to do the in a single html page .

http://livedemo00.template-help.com/wt_45856/

This is my code , which i have to enhance

http://codepen.io/inoxe/pen/QNGVEZ

thank you .

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>

$(document).ready(function(){


    $("button").click(function() {
      if ( this.value == '1')

      {
        $("#business_new").hide();
        $("#business").show();
      }
      else  if ( this.value == '2')
      {
        $("#business").hide();
        $("#business_new").show();
      }

    });
});
</script>


</head>
<body>

<div class="container">

<div id='purpose' >                                             
    <button type="button" class="btn btn-primary" value="1">About us</button>
    <button type="button" class="btn btn-primary" value="2">Services</button>
</div>

<div style='display:none;' id='business'><br/>
<h1> 1st one </h1>
</div>

<div style='display:none;' id='business_new'><br/> 
<h1> 2nd one </h1>
</div>

</div>

</body>
</html>

Answers


use jquery

    hover()
mouseover()

You can use jQuery to do both things. To solve hover events you can use two jQuery APIs:

  1. .hover() - https://api.jquery.com/hover/

Example:

$("#img_btn").hover(function() {
  //do something
});
  1. .mouseover() - https://api.jquery.com/mouseover/

Example:

$("#img_btn").mouseover(function() {
  //do something
});

For your example a possible solution could look like this:

$("button").hover(function() {
    if ( this.value == '1') {
        //do something when button 1 is hovered
    } else  if ( this.value == '2') {
        //do something when button 2 is hovered
    }
});

Cheers!


Need Your Help

In Moose subroutines, how does $meta get into @_?

perl moose

chromatic's recent blog got me curious about the Moose subroutine has. I was looking at the Moose source code and noticed that inside the has subroutine, there is a $meta variable unpacked from @_....

Hibernate exception in inserting data in asyn manner

spring hibernate insert

I am using Spring RESTful service, these service are accessed by Android device for inserting data in our database. when two simultaneous request comes it gives the exception. I am using MySQL data...