如何仅在悬停时增加文本框内文本的字体大小 [英] How to increase only font-size of the text inside the text box on hover

问题描述

就我而言，我有文本字段.在悬停时，我想突出显示文本(或增加唯一文本而不是文本框的字体大小.

In my case i have text field. on hover i wanted to highlight text (or increase the font-size of the only text not text box.

我尝试过的是，但这同时增加了文本框和文本.我知道我做了什么，但我不知道该怎么做.我只想增加文本大小，不增加文本字段，请帮助我.

what i have tried is, but this is increases text box also along with text. I know what i have done but I don't know how to do. I want to increase only text size not text field please help me.

预先感谢...

我的代码...

.chandru {
	font-size: 0.5em;
	position: absolute;
}
.chandru:hover {
	font-size: 2.5em;
}	

<input class="chandru" name="chandru" value="Hai hello">

推荐答案

您必须固定输入元素的高度和宽度，才能仅增加字体大小.

You have to fix the height and the width of the input element in order to only increase the font-size.

.chandru {
            font-size: 0.5em;
            position: absolute;
            height:20px;
            width:200px;
            transition: all 200ms ease-in-out;
        }

            .chandru:hover {
                font-size: 2.5em;
            }

<input class="chandru" name="chandru" value="Hai hello"/>

这篇关于如何仅在悬停时增加文本框内文本的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！