Tips on keeping the cursor constant in CSS margins

Question

Tips on keeping the cursor constant in CSS margins

Currently, I have a div that has a width of 160px and a height of 80px. Strangely enough, the div also has a margin-left of 540px. Additionally, in my CSS, I've specified cursor:pointer.

The issue arises when I move my cursor to the left of the div, where the margin area is located, causing the mouse pointer to change to pointer.

How can I prevent the cursor from changing when moving over the margin area but allow it to change only when hovering over the div itself?

I must stick with using margin as positioning will lead to structural issues.

html css margin mouse-cursor

Answer 1

Answer №1

You may be able to achieve this effect using the CSS :after pseudo-element, like so:

div {
  width: 100px;
  height: 100px;
  background: red;
  margin-left: 100px;
  cursor: pointer;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: -100px;
  width: 100px;
}

<div></div>

Original code snippet can be found here: http://jsfiddle.net/EwLVu/

Answer 2

You may be able to achieve this effect using the CSS :after pseudo-element, like so:

div {
  width: 100px;
  height: 100px;
  background: red;
  margin-left: 100px;
  cursor: pointer;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: -100px;
  width: 100px;
}

<div></div>

Original code snippet can be found here: http://jsfiddle.net/EwLVu/

Answer 3

Answer №2

Encountering the same issue led me to discover a solution. In my CSS, I had written something similar to this:

body {cursor:url('address to your .cur file'), default;}

Upon encountering the cursor defaulting over a margin area, I decided to make a change. I simply shifted the cursor code location from BODY directly to HTML like so:

html {cursor:url('address to your .cur file'), default;}

The result? A successful fix.

Answer 4

Encountering the same issue led me to discover a solution. In my CSS, I had written something similar to this:

body {cursor:url('address to your .cur file'), default;}

Upon encountering the cursor defaulting over a margin area, I decided to make a change. I simply shifted the cursor code location from BODY directly to HTML like so:

html {cursor:url('address to your .cur file'), default;}

The result? A successful fix.

Answer 5

Answer №3

Is it possible to utilize nested divs for this task? Add padding to the outer div in order to create a margin effect, and then set the cursor property for the inner div.

Check out this example:

.outer {
  padding-left: 50px;
  border: solid black 1px;
}

.inner {
  cursor: pointer;
  border: solid red 1px;
}

.clearFloat {
  clear: Both;
}

<div class="outer">
  <div class="inner">content within inner div<br />More content inside inner div</div>
</div>
<div class="clearFloat"></div>

Answer 6

Is it possible to utilize nested divs for this task? Add padding to the outer div in order to create a margin effect, and then set the cursor property for the inner div.

Check out this example:

.outer {
  padding-left: 50px;
  border: solid black 1px;
}

.inner {
  cursor: pointer;
  border: solid red 1px;
}

.clearFloat {
  clear: Both;
}

<div class="outer">
  <div class="inner">content within inner div<br />More content inside inner div</div>
</div>
<div class="clearFloat"></div>

Tips on keeping the cursor constant in CSS margins

Answer №1

Answer №2

Answer №3

Similar questions

Shift a div towards the right edge of the navigation bar

Is there a way to ensure that my JavaScript code remains permanent?

Modify the label contents to reflect the selected file, rather than using the default text

What is the best way to line up three divs horizontally and center the contents inside each one?

How can a block be made to stay fixed and float in a flexbox layout?

Middle alignment not functioning properly in vertical layout

A guide on effectively selecting an element with the '@font-face' tag

What occurs when Click events are triggered on an <object> element?

Can CSS be used for creating unique color combinations?

The page refreshes automatically when the search icon is clicked, but the ajax method does not trigger the page reload

Loop through every list item within each unordered list using JQuery

Contrast the positions (offsets) of two elements

The misaligned navigation bar and distortion on mobile devices are causing issues with the website's layout

HTML5 - the enigmatic header and outline procedure

The implementation of an onclick event in a freshly created HTML element is functioning solely on the final element

creating a table displaying data in a horizontal format sourced from ajax/json transformation

Using AngularJS to bind events on key presses

What is causing columns.render not to trigger when DataTable().draw() is invoked?

Struggling to design a form to incorporate changing weekly elements into a homepage

Modify the appearance of the datepicker and set the field to be view-only