我有一个input字段，我想对其文字进行悬停效果：当鼠标为时，将其文字的下边框设置为彩色在它上面。
以下代码使整个输入字段的下边框变为彩色。
以下代码适用于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>
答案 0 :(得分：1)
而不是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
答案 1 :(得分：0)
input:hover {
text-decoration: underline;
-moz-text-decoration-color: #42b983; /* Code for Firefox */
text-decoration-color: #42b983;
}