gpt4 book ai didi

javascript - 设置文本边框而不是输入字段

转载 作者:太空宇宙 更新时间:2023-11-04 08:58:34 25 4
gpt4 key购买 nike

我有一个输入字段,我想在它的文本上做一个悬停效果:当它的文本的底部边框是彩色的鼠标在上面。

下面的代码让整个输入框的底部边框变成了彩色。

以下代码适用于 value2,它不是 input

有谁知道如何处理输入框内的文本,而不是输入框?

JSBin

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<style>
input {
font-size: 20px;
border:none;
display: inline-block;
background-color:transparent;
}
.item {
font-size: 20px;
display: inline-block;
}
input:hover, .item:hover {
border-bottom: 2px solid #42b983;
}
</style>
</head>
<body ng-app="app" ng-controller="Ctrl">
<input type="text" ng-model="value1">
<br/>
<div class="item">{{value2}}</div>
<script>
var app = angular.module('app', []);
app.controller('Ctrl', ['$scope', function ($scope) {
$scope.value1 = "value1";
$scope.value2 = "value2"
}])
</script>
</body>
</html>

最佳答案

代替 border-bottom 你可以使用:

 input:hover {
text-decoration: underline;
-webkit-text-decoration-color: red;
-moz-text-decoration-color: red;
text-decoration-color: red;
}

请注意,浏览器支持是有限的。看: http://caniuse.com/#search=text-decoration-color

关于javascript - 设置文本边框而不是输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42940174/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com