How to recognize hover/click of a border in CSS and JS

Question

Hi I am working on a CodePen to make a draggable and resizavle box without Jquery. What I am trying to accomplish is that when you hover/click over the main body of the div you can drag it around and will have the "move" cursor.

When you hover/click on the border, you can resize the box, based on which side you click on and have the "col-resize" or "row-resize" cursor.

What I am really wondering is if it is even possible to select the border with JS and CSS, and if so how.

Answer 1

_{I don't think that you can detect a click just on the border without any workaround. You could detect the border by checking where the mouse is in relation to box, as @ibrahim mahrir did, but I prefer just using a wrapper element it:}

Undynamic to CSS values

The most simple. Set the width of the "border" manually. Use if you're never going to change the padding/width of the "border".

var border = document.getElementById("border");

var bor = 4;

border.onclick = function(e) {
  if (e.target !== e.currentTarget) return;
  console.log("border-clicked")
}

border.onmouseover = function(e) {
  y = e.offsetY;
  
  if (y <= bor || y >= this.offsetHeight - bor) c = "row"
  else c = "col"

  this.style.cursor = c + "-resize";
}

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

<div id="border">
<div class="box"></div>
</div>

Dynamic to one CSS value

Set the width of the "border" by selecting one of the values of the padding. Use this if are going to change the value of the padding and has the same width throughout.

var border = document.getElementById("border");

var bor = parseInt(window.getComputedStyle(border, null).getPropertyValue('padding-left') )

border.onclick = function(e) {
  if (e.target !== e.currentTarget) return;
  console.log("border-clicked")
}

border.onmouseover = function(e) {
  y = e.offsetY;
  
  if (y <= bor || y >= this.offsetHeight - bor) c = "row"
  else c = "col"

  this.style.cursor = c + "-resize";
}

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

<div id="border">
<div class="box"></div>
</div>

Dynamic to both CSS values

Set the width of the "border" by selecting a horizontal and vertical value of the padding. Use this if the padding is like padding: #px #px.

var border = document.getElementById("border");


var borderStyles = window.getComputedStyle(border, null);
var borLeft = parseInt( borderStyles.getPropertyValue('padding-left') )
var borTop = parseInt( borderStyles.getPropertyValue('padding-top') )

border.onclick = function(e) {
  if (e.target !== e.currentTarget) return;
  console.log("border-clicked")
}

border.onmouseover = function(e) {
  x = e.offsetX;
  y = e.offsetY;
  
 if (x < borLeft || x > this.offsetWidth - borLeft ) c = "col";
 else if (y <= borTop || y >= this.offsetHeight - borTop) c = "row"

  this.style.cursor = c + "-resize";
}

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

<div id="border">
<div class="box"></div>
</div>

Answer 2

This is an example of how to determine which border you're hovering (good luck with your other calculations):

var div = document.querySelector("#div");
var delta = 10; // the thickness of the hovered border area

div.onmousemove = function(e) {
    var rect = div.getBoundingClientRect();
    var x = e.clientX - rect.left,      // the relative mouse postion to the element
        y = e.clientY - rect.top,       // ...
        w = rect.right - rect.left,     // width of the element
        h = rect.bottom - rect.top;     // height of the element
        
   var c = "";                          // which cursor to use
   if(y < delta) c += "n";              // north
   else if( y > h - delta) c += "s";    // south
   if(x < delta) c += "w";              // west
   else if(x > w - delta) c += "e";     // east
   
   if(c)                                // if we are hovering at the border area (c is not empty)
       div.style.cursor = c + "-resize"; // set the according cursor
   else                                 // otherwise
       div.style.cursor = "pointer";    // set to pointer
}

#div {
  background-color: red;
  width: 100px;
  height: 100px;
}

<div id="div"></div>
<br>Psst! Hover at the border area! Corners too.

Note: The above method doesn't relly on wether or not the element has borders, and wether or not it could have child nodes (for example img...).

Answer 3

Create a div and make it is position absolute inside your hole div add the style of you border to it then give a hover effect and the event you want to it. Set the position relative to the hole div and absolute to the border div you have to set left, right,top,bottom to minus value according to your border width you may need to make the background-color as transparent.