Гиперссылки на CSS-переходы / трансформации (масштаб) не открываются - PullRequest
0 голосов
/ 30 августа 2018

Проблема с гиперссылками, которые нельзя нажимать при наведении на элемент с эффектом масштаба. На этой странице есть элемент Li (литий, а не тег li), с которым я экспериментирую. Ссылки должны быть кликабельными.

.cell {
	display:inline-block;
  float: left;
  position: relative;
  width: 5.55%;
  height: 100%;
	.transition(all 200ms ease);
	
}

.element  {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 1px;
  right: 1px;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.05);
  text-align: center;
  cursor: default;
  pointer-events: none;
  .transition(all 200ms ease);
	
  
  background-color: rgba(0, 128, 128, 0.6);
}

.cell:hover .element {
  border-color: rgba(0,0,0,0.1);
  .transform(scale(1.8,1.8));
  background-color: rgba(0, 128, 128, 0.9);
}

.links_on_hover{
	display:inline-block;
	
	
}
<div class="cell">
      <div class="element">
        <div class="at_num">3</div>
        <div class="symbol"><a id="links_on_hover" href="elements/eng/Li.php">Li</a></div>
        <div class="at_details">lithium<br />6.94</div>
      </div>
    </div>

1 Ответ

0 голосов
/ 30 августа 2018
.element {
    ... 
    pointer-events: none;
}

Это свойство отключает щелчки мышью, даже для его дочерних элементов.

...