Hover at the mouse

Question

How can I zoom the <h3> tagged text when the mouse hovers on them using jQuery?

This is the JavaScript code.

 var bindBehaviors = function (scope) {
            $('h3',scope).hover(
            function () {
            $(this).css("font-size", "40px");
            },
           function () {
           $(this).css("font-size", "25px");
           }
           );
           }
           bindBehaviors(this);

It is changing its size, but it is happening when I put the mouse anywhere on the row which contains <h3> text. Why? Another problem is the positioning.

The ASPX code is the following.

<form id="form1" runat="server">
  <div id="dictionary">
  </div>
  <div class="letters">
    <div class="button" id="letter-a">
      <h3>A</h3>
      <button type="button">Load</button> 
    </div>
    <div class="button" id="letter-b">
      <h3>B</h3>
      <button type="button">Load</button> 
    </div>
    <div class="button" id="letter-c">
      <h3>C</h3>
      <button type="button">Load</button> 
    </div>
    <div class="button" id="letter-d">
      <h3>D</h3>
      <button type="button">Load</button> 
    </div>
  </div>
  <div class="button" id="letter-f">F
    <form>
      <input type="text" name="term" value="" id="term" />
      <input type="submit" name="search" value="search" id="search" />
    </form>
  </div>
  <div id="loading">
    Loading...
  </div>
</form>

Answer 1

html: <h3>Some text</h3>

css: h3 {font-size: 14px;}

jquery:

$('h3').hover(
  function () {
    $(this).css("font-size", "16px");
  },
  function () {
    $(this).css("font-size", "14px");
  }
);

Answer 2

You have a couple of options.

Just css.

h3
{
    transform: scale(1);
}

h3:hover
{
    transform: scale(1.5);
}

JS(jQuery)

$('h3').hover(
    function()
    {
        $(this).effect('scale',{percent:200},1000);
    },
    function()
    {
        $(this).effect('scale',{percent:50},1000);
    },     
);

Something like could help.