триггер css: наведите курсор только на область высоты строки - PullRequest
Новая
       6

триггер css: наведите курсор только на область высоты строки

0 голосов
/ 14 ноября 2018

Я строю карту с несколькими стрелками на ней, эти стрелки запускают некоторые действия, когда пользователь нажимает на них.

Я использую символ, похожий на этот ^, чтобы нарисовать стрелки, я хочу, чтобыизменить его цвет, когда пользователь наводит на него курсор мыши.Что мне нужно, так это чтобы не вызывать событие, когда мышь находится под символом, я уменьшил свойство line-height и добавил некоторые отступы сверху, поэтому область фона настраивается так, чтобы покрывать только форму символа, это выглядит примерно такэто:

enter image description here

Высота фоновой области уменьшена

enter image description here

Проблема в том, что: hover, он продолжает срабатывать в «Исходной области символов», игнорирует свойство line-height, , если вы подведете мышь под цветную область, это вызовет указатель мыши и изменит цвет текста..

Мне нужно, чтобы свойство: hover вызывало только текстовую высоту строки или цветной фон.

Возможно ли это? 

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

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Ответ более прост, чем вы думаете: у вас переполнение, которое вам нужно скрыть.Уменьшение line-height действительно уменьшит линейный блок (необходимую вам высоту), но не изменит высоту символа, который будет переполнен: 

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>
0 голосов
/ 14 ноября 2018

Это действительно странно.

В качестве решения, мы можем просто полностью удалить события мыши на самом div и подражать div с помощью псевдоэлемента (и поэтому :hover сработает напсевдоэлемент, а не сам элемент div). 

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>
...