css - CSS-transitions/transforms (scale) 上的超链接打不开

Question

将鼠标悬停在具有缩放效果的元素上时，超链接无法点击的问题。 On this page ，我正在试验一个 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>

Answer 1

.element {
    ... 
    pointer-events: none;
}

这个属性禁止鼠标点击，即使是它的 child 。