Question

当鼠标悬停在jQuery上时，如何缩放<h3>标记文本？

这是JavaScript代码。

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

它正在改变它的大小，但当我将鼠标放在包含<h3>文本的行的任何位置时，它就会发生。为什么？另一个问题是定位。

ASPX代码如下。

<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

你有几个选择。

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);
    },     
);

可能有所帮助。

Answer 2

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");
  }
);

将鼠标悬停在鼠标上

2 个答案: