マウスが

Question

を入力したときに、私が代わりに画像の私は、テキストのサイズを変更する次のフィドルjsfiddle

ブートストラップ

<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を参照してください。