作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个带有input type="file"
的表单,总共有3个输入
。因此,根据客户请求,我对设计进行了一些更改,并隐藏 input type="file"
上的默认样式,并将其转换为拖放样式。现在的问题是,当我在input
部分中拖动文件时,我需要突出显示文件被拖动的div,因为我只有4个输入突出显示我为突出显示 div
HMTL
<div class="col-sm-4">
<label for="exampleInputFile">File Before</label>
<div class="file-drop-area border">
<input type="file" id="exampleInputFile" class="file_before files" name="file_before[]" multiple required>
<p class="message" name="drag">Drag your files here or click in this area.</p>
</div>
<div class="file_before_append"></div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="exampleInputFile">File After</label>
<div class="file_after-drop-area border">
<input type="file" id="exampleInputFile" class="file_after files" name="file_after[]" multiple required>
<p class="message">Drag your files here or click in this area.</p>
</div>
<div class="file_after_append"></div>
</div>
脚本
<script>
var $fileInput = $('.file_after');
var $droparea = $('.file_after-drop-area');
$fileInput.on('dragenter focus click', function () {
$droparea.addClass('is-active');
});
$fileInput.on('dragleave blur drop', function () {
$droparea.removeClass('is-active');
});
</script>
<script>
var $fileInput = $('.file_before');
var $droparea = $('.file-drop-area');
$fileInput.on('dragenter focus click', function () {
$droparea.addClass('is-active');
});
$fileInput.on('dragleave blur drop', function () {
$droparea.removeClass('is-active');
});
</script>
Runs only the 2nd script you can say it runs the last script
CSS
form input.files{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
opacity: 0;
}
.border{
border: 2px dashed #d2d6de;
height: 40px;
}
form .message{
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
overflow: hidden;
color: #d2d6de;
}
label.col-sm-10 {
padding-left: initial;
}
.file-drop-area {
position: relative;
display: flex;
width: 450px;
max-width: 100%;
transition: 0.2s;
}
.file-drop-area.border.is-active {
border: 2px dashed black;
}
.file_after-drop-area {
position: relative;
display: flex;
width: 450px;
max-width: 100%;
transition: 0.2s;
}
.file_after-drop-area.border.is-active {
border: 2px dashed black;
}
现在我想突出显示我将鼠标悬停在拖动文件上的 div jsfiddle link
最佳答案
这里不能对不同的方法使用相同的变量。通过使用 var fileinput。
Check out
我复制并修改的 fiddle
关于javascript - 如何突出显示拖动文件的唯一 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59661206/
有没有一种方法可以“标记”对象的属性,使它们在反射中“突出”? 例如: class A { int aa, b; string s1, s2; public int AA
我是一名优秀的程序员,十分优秀!