如何在悬停时仅增加文本框内文本的字体大小

时间:2016-10-13 07:29:43

标签: jquery html css

在我的情况下,我有文字字段。在悬停时我想突出显示文本(或增加唯一文本的字体大小而不是文本框。

我试过的是,但这也是增加文本框以及文本。我知道我做了什么,但我不知道该怎么做。我想只增加文字大小而不是文字字段请帮助我。

提前致谢...

我的代码......



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

<input class="chandru" name="chandru" value="Hai hello">
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:1)

通过固定输入字段的大小。只有font-size更改。

.myinput{
  width:200px;
  height:20px;
  font-size:10px;
 }

.myinput:hover{
  font-size:15px; 
 }
<input type="text" class="myinput" value="Test">

答案 1 :(得分:1)

您必须修改输入元素的高度和宽度才能增加字体大小。

.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"/>

答案 2 :(得分:0)

你可以这样做,它看起来不是最好的,但它是你要求的。

#include <stdio.h>
#include <stdlib.h>
#include <sys/types.h>
#include <sys/wait.h>
#include <unistd.h>

int main() {
    pid_t pid;
    int status, value;

    pid = fork();

    if (pid > 0) { // Father

        pid = fork();

        if (pid > 0) { // Father
            wait(&status);
            value = WEXITSTATUS(status);

            if (value == 2)
                printf("Child 2");
            else if (value == 3)
                printf("Child 1");

        } else if (pid == 0) { //Child 2 - Orphan
            sleep(4);
            exit(2);

        } else {
            exit(1);
        }

    } else if (pid == 0) { // Child 1 - Zombie
        sleep(1);
        exit(3);

    } else {
        printf("Error al ejecutar el fork");
        exit(1);
    }



    return 0;
}
.chandru {
	font-size: 0.5em;
	position: absolute;
   height: 10px;
     width:100px;
}
.chandru:hover {
	font-size: 1.5em;
  height: 10px
    width:100px
}

答案 3 :(得分:0)

而不是增加字体大小为什么不以这种方式更改文本框的边框颜色也可以突出显示该特定文本字段或同时

.chandru{
  border: 1px solid #888;
  transition: border 0.8s ease;
  padding: 6px 10px;
}
.chandru:hover {
  border: 1px solid blue;
}

.chandru1 {
  border: 1px solid #888;
  transition: border 0.8s ease;
  height: 50px;
  width: 200px;
  font-size: 14px;
}
.chandru1:hover {
  font-size: 16px;
  border: 1px solid blue;
}
<input class="chandru" name="chandru" value="Hai hello" />

<br/><br/><br/>

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