绝对定位移出按钮的文本无法触发鼠标事件，Firefox下如何解决？

这个问题是Firefox对<button>元素的特殊处理导致的——当按钮的子元素超出了按钮自身的盒模型范围时，Firefox不会将鼠标事件传递给这些超出的子元素，而Chrome和IE则没有这个限制。下面给你两种可行的解决方案：

方案一：重构HTML结构（推荐） #

把标题标签从按钮内部移出来，用一个父容器包裹按钮和标题，这样就能让标题正常接收鼠标事件，同时hover状态也能顺利传递给按钮：

修改后的HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-container">
  <button class="item-button"></button>
  <span class="item-title">File Title</span>
</div>

调整后的CSS #

/* 新增父容器样式，用来定位标题 */
.item-container {
  position: relative;
  display: inline-block;
  margin: 25px;
  margin-bottom: 40px;
}

.item-button {
  width: 110px;
  height: 150px;
  background: #eee;
  border: #fff solid 2px;
  box-shadow: 0 0 10px #ccc;
  transition: all 0.5s ease;
}

.item-button:hover, .item-button.hover {
  color: black;
  text-shadow: 1px 1px #fff;
  border: #fff solid 2px;
  box-shadow: 0 0 20px #999;
}

.item-title {
  position: absolute;
  top: 160px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 10pt;
  line-height: 15px;
  z-index: 999;
  /* 可选：添加鼠标指针样式，提示可点击 */
  cursor: pointer;
}

更新后的JS #

// 监听父容器的hover，控制按钮的状态
$('.item-container').hover(function() {
  $(this).find('.item-button').addClass('hover');
}, function() {
  $(this).find('.item-button').removeClass('hover');
});

// 标题的点击事件正常生效
$('.item-title').on('click', function() {
  alert('test this');
});

方案二：不修改结构的临时解决（不推荐） #

如果不想调整HTML结构，可以通过给按钮设置pointer-events: none让标题接收事件，同时给标题绑定hover和点击事件来控制按钮状态，但这样按钮本身的交互会被禁用，需要额外处理按钮的点击：

修改后的CSS #

.item-button {
  /* 原有样式不变，新增 */
  pointer-events: none;
}

.item-title {
  /* 原有样式不变，新增 */
  pointer-events: auto;
  cursor: pointer;
}

更新后的JS #

// 标题的hover控制按钮状态
$('.item-title').hover(function() {
  $(this).parent().addClass('hover');
}, function() {
  $(this).parent().removeClass('hover');
});

// 标题点击事件
$('.item-title').on('click', function() {
  alert('test this');
});

// 如果需要按钮本身可点击，得额外处理，比如给按钮添加点击事件委托
$(document).on('click', '.item-button', function(e) {
  // 因为按钮pointer-events:none，所以需要检查点击是否在按钮范围内
  if(e.target === this) {
    alert('button clicked');
  }
});

方案一的优势在于保持了元素的正常交互逻辑，跨浏览器兼容性更好，推荐使用。

内容的提问来源于stack exchange，提问作者Nidonocu