javascript - 鼠标输入时调整文本大小

Question

我有下一个 fiddle jsfiddle我想调整文本而不是图像的大小

Bootstrap

<div class="row">
    <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
        <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
        <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
        <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
</div>
<div class="row text">
<div class="col-md-4 ">text</div>
<div class="col-md-4 ">text</div>
<div class="col-md-4 ">text</div>
<div class="col-md-4 ">text</div>
</div>

CSS

body {
height:1000px;
width:100%;
background-color:#F0F0F0;
}

#header_div {
width:100%;

JS:

 $(document).ready(function () {
   $(".header img").mouseleave(function () {
       $(this).stop().animate({
           height: "50px"
       }, 600);
   });

   $(".header img").mouseenter(function () {
       $(this).stop().animate({
           height: "100px"
       }, 600);
   });

   $(".text div").mouseleave(function () {
       $(this).stop().animate({
           height: "50px"
       }, 600);
   });

   $(".text div").mouseenter(function () {
       $(this).stop().animate({
           height: "100px"
       }, 600);
   });
 })

因此，作为图像，我可以更改图像的大小，但文本不会变大。非常感谢任何帮助。问候

Answer 1

使用fontSize更改文本的大小。因此，将 height 替换为 fontSize 修改您的 ".text div" 事件，如下所示。

$(".text div").mouseleave(function () {
       $(this).stop().animate({
           fontSize: "50px"
       }, 600);
   });

   $(".text div").mouseenter(function () {
       $(this).stop().animate({
           fontSize: "100px"
       }, 600);
   });

请参阅fiddle .