trigger css:hover on its line-height area only

user_2966583 0
Viewed 529

I am building a map with some arrows on it, these arrow trigger some actions when the user click them.

I am using a character similar to this one ^ to draw the arrows, what I want is to change its color when user moves the mouse over it. What I need is to avoid triggering the event when the mouse hovers under the character, I made the line-height property smaller and added some padding on the top, so the background area is adjusted to cover the character shape only, it looks something like this:

enter image description here

The background area has its height reduced

enter image description here

The problem is the :hover, it continues triggering on the "Original Character area", it is ignoring the line-height property, if you move the mouse under the colored area it will trigger the hover and change the text color.

I need the :hover property to trigger on the text line-height or the colored background only.

Is this possible?

div{
  color: white;
  font-size: 40px;
  line-height: 5px;
  background-color: red;
  padding-top: 12px;
  width: 20px;
}
div:hover{
  color:black;
}
<div>^</div>

hover css html
2 Answers

That's weird indeed.

As a solution, we can just completely remove the mouse events on the div itself, and mimic the div with a pseudo-element (and so the :hover will trigger on the pseudo-element rather than the actual div itself).

div{
  color: white;
  font-size: 40px;
  line-height:5px;
  background-color: red;
  padding-top: 12px;
  width: 20px;
  height:5px;
  pointer-events:none;
  position:relative;
}
div::after{
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  top:0;
  left:0;
  content:"";
  pointer-events:all;
  
}
div:hover{
  color:black;
}
<div>^</div>

user_106535380

The answer is more simple than you think: you have an overflow that you need to hide. Decreasing the line-height will indeed decrease the line-box (the height you want) but will not change the height of the character that will overflow:

div {
  color: white;
  font-size: 40px;
  line-height: 5px;
  background-color: red;
  padding-top: 12px;
  width: 20px;
  overflow: hidden;
}

div:hover {
  color: black;
}
<div>^</div>

user_86203330
Related