我有一个输入字段，我想在它的文本上做一个悬停效果:当它的文本的底部边框是彩色的鼠标在上面。
下面的代码让整个输入框的底部边框变成了彩色。
以下代码适用于 value2，它不是 input。
有谁知道如何处理输入框内的文本，而不是输入框？
<!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/