Question

我需要在悬停时更改字体大小，我认为这对我不起作用，因为我使用的是bootstrap。这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
<title>Marichihueu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">    </script>
<script>
 $(document).ready(myMain);
  function myMain(){

    $("a").hover(more);

    function more(){
        $(this).animate({font-size:'50px'},"fast");
    }

}
</script>
</head>

<body>
<header>
<div class="container-fluid">
    <h1>TEST</h1>
</div>
</header>

<div class="container">
<div class="row well">
    <div>
        <input type="text" />
    </div>
    <div class="row-fluid">
        <ul class="nav nav-pills">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            <li><a href="#">I</a></li>
            <li><a href="#">J</a></li>
            <li><a href="#">K</a></li>
            <li><a href="#">L</a></li>
            <li><a href="#">M</a></li>
            <li><a href="#">N</a></li>
            <li><a href="#">Ñ</a></li>
            <li><a href="#">O</a></li>
            <li><a href="#">P</a></li>
            <li><a href="#">Q</a></li>
            <li><a href="#">R</a></li>
            <li><a href="#">S</a></li>
            <li><a href="#">T</a></li>
            <li><a href="#">U</a></li>
            <li><a href="#">V</a></li>
            <li><a href="#">X</a></li>
            <li><a href="#">Y</a></li>
            <li><a href="#">Z</a></li>
        </ul>
    </div>
</div>
</div>
</body>
</html>

我不知道到底出了什么问题，也许还有一些引导规则。

抱歉我的英语不好。

Answer 1

li a {

  font-size: 16px;

  /* HOVER OFF */

  -webkit-transition: all 5s ease;

  -moz-transition: all 5s ease;

  -o-transition: all 5s ease;

  -ms-transition: all 5s ease;

}

li a:hover {

  font-size: 80px;

  /* HOVER ON */

  -webkit-transition: all 5s ease;

  -moz-transition: all 5s ease;

  -o-transition: all 5s ease;

  -ms-transition: all 5s ease;

}

<ul class="nav nav-pills">
  <li><a href="#">A</a>
  </li>
  <li><a href="#">B</a>
  </li>
  <li><a href="#">C</a>
  </li>
  <li><a href="#">D</a>
  </li>
  <li><a href="#">E</a>
  </li>
  <li><a href="#">F</a>
  </li>
  <li><a href="#">G</a>
  </li>
  <li><a href="#">H</a>
  </li>
  <li><a href="#">I</a>
  </li>
  <li><a href="#">J</a>
  </li>
  <li><a href="#">K</a>
  </li>
  <li><a href="#">L</a>
  </li>
  <li><a href="#">M</a>
  </li>
  <li><a href="#">N</a>
  </li>
  <li><a href="#">Ñ</a>
  </li>
  <li><a href="#">O</a>
  </li>
  <li><a href="#">P</a>
  </li>
  <li><a href="#">Q</a>
  </li>
  <li><a href="#">R</a>
  </li>
  <li><a href="#">S</a>
  </li>
  <li><a href="#">T</a>
  </li>
  <li><a href="#">U</a>
  </li>
  <li><a href="#">V</a>
  </li>
  <li><a href="#">X</a>
  </li>
  <li><a href="#">Y</a>
  </li>
  <li><a href="#">Z</a>
  </li>
</ul>

为什么只在CSS中才能在JS中使用它？

Update

效果只是根据你的需要改变为快速我慢慢显示它看起来如何

Answer 2

您只需使用'font-size'代替font-size

$(document).ready(myMain);
function myMain(){
    $("a").hover(big , small);

    function big(){
        $(this).animate({'font-size':'50px'},"fast");
    }
    function small(){
        $(this).animate({'font-size':'15px'},"fast");
    }
}

DEMO

注意：您可以使用自定义持续时间而不是快速＆＃39;并且“慢”＆＃39;默认持续时间：400在此处找到animate()

但是我更喜欢在@Pekka中使用hss在hss中回答并使用转换..无论如何它取决于你

JQuery无法更改font-size

2 个答案: