如何实现鼠标悬停在数据显示区域边缘下方时,数据显示区域下方边框线鼠标悬停时可以拖动,调整整体数据区域高度
时间: 2024-04-29 14:24:36 浏览: 10
您可以通过以下代码实现该功能:
```
$(document).ready(function(){
$('#data-area').hover(function(){
$(this).css('border-bottom', '2px solid blue');
}, function(){
$(this).css('border-bottom', 'none');
});
$('#data-area').on('mousedown', function(event) {
var startY = event.pageY;
$(document).on('mousemove', function(e) {
var heightChange = e.pageY - startY;
var newHeight = $('#data-area').height() + heightChange;
if (newHeight > 0) {
$('#data-area').height(newHeight);
startY = e.pageY;
}
});
$(document).on('mouseup', function() {
$(document).off('mousemove');
});
});
});
```
这段代码将数据区域下方的边框线设为蓝色,并允许您通过鼠标拖动调整整个数据区域的高度。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)