如何在图像库森时更改颜色和显示工具提示

how to change color and show tooltip when image coosen?

本文关键字：颜色 显示 工具提示 图像      更新时间：2023-09-26

我已经用字体真棒图标更改了我的输入类型文件按钮，所以当我想浏览图片时，我可以单击图标(字体真棒(。现在我想要的是 - 如果选择了图片，则使图标变为绿色，当光标触摸它时，工具提示显示图片名称/文件名。

这是更改浏览按钮的脚本

<input type="file" name="gpost" id="input"> <label for="input" id="label"><i class="fa fa-camera"></i></label>

input#input{
display: none;}label#label :hover{color:#53bd84;}

对不起我的语言，我新来的....

使用.next方法给出当前元素的下一个匹配元素。 .css和.attr可用于设置element的style和title

试试这个：

$('#input').on('change', function() {
  if (this.value) {
    $(this).next('label').css('color', '#53bd84');
    $(this).next('label').attr('title', this.value);
  } else {
    $(this).next('label').css('color', '');
    $(this).next('label').removeAttr('title');
  }
})
input#input {
  display: none;
}
label#label:hover {
  color: #53bd84;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="file" name="gpost" id="input" accept="image/*">
<label for="input" id="label"><i class="fa fa-camera"></i>
</label>

在这里摆弄

相关文章：