CSS转换/转换(比例)上的超链接未打开

时间:2018-08-30 06:01:49

标签: css css-transitions css-transforms

将鼠标悬停在具有缩放效果的元素上时,超级链接无法单击。 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>

1 个答案:

答案 0 :(得分:1)

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

此属性即使在其子级也禁止鼠标单击。