CODEWITHSUNDEEP
css
Folder
Folder

Reputation: 159

Increase hover detection radius

I've tried border-radius; xx on both #my-element and a:hover#my-element, but it's not working.

What is the proper way to set the radius of hover detection in css?

Upvotes: 2

Views: 2959

Answers (3)

Asons
Asons

Reputation: 87262

You want it like this?

By using pseudo it doesn't flip back and forth when the mouse gets outside the border by the hover effect.

Also with the pseudo you keep the original elements size, you don't need extra element and you can easily make the hover area bigger.

div {
  position: relative;
  display: inline-block;
  padding: 10px;
  border: 2px solid red;
}

div:before {
  content: "";
  position:absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
}

div:hover {
  border-radius: 50%;
}
<div>HOVER ME</div>

Upvotes: 2

Valentin Mercier
Valentin Mercier

Reputation: 5326

The hover event will be triggered as soon as your mouse enters within the bounds of your element.

border-radius does not change the radius of the hoverable zone of your element but changes the rounded effect of the default square corners of your element.

If you want to enhance the coverable zone of your element I suggest you put it inside a bigger element with a size you please and then you detect the hover event of this element.

Of course because CSS is a wonderful tool you can change the style of an element within an hovered element using the following selector:

#elementBIG:hover #originalElement {...}

The HTML of this example then becomes:

<div id="elementBIG">
    <div id="originalElement"></div>
</div>

Upvotes: 3

Charles
Charles

Reputation: 345

Have you tried to wrap the targeted element in a dynamically sized div with padding set to the amount of hover MOE (margin of error) you are trying to achieve- then target the div ID for hover? - sort of hacky but not sure of how else you could achieve this effect.

Upvotes: 1

Related Questions