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。

鼠标输入时调整文本大小

1 个答案: