重新定位的按钮文本不可点击答案

【问题标题】：Repositioned button text not clickable重新定位的按钮文本不可点击
【发布时间】：2018-06-19 11:13:26
【问题描述】：

我通过使用position absolute 将按钮的文本移到自身之外，创建了一个看起来像文档的按钮，其下方有一个标签：

$('.item-title').hover(function() {
  $(this).parent().addClass('hover');
}, function() {
  $(this).parent().removeClass('hover');
});
$('.item-title').on('click', function() {
  alert('test this')
});

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

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

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

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

但是，我似乎无法让现在浮动在控件之外的标签对任何鼠标事件做出反应。如何使其可点击并将其悬停状态传递回其父级？

编辑：似乎这是 firefox 的浏览器特定问题，在 Chrome 和 IE 中正常工作。

【问题讨论】：

在这里工作正常，你的意思是悬停在文本上以启动文档上的发光对吗？
正确，这反过来又让我知道如何让它也可以点击。
奇怪的是，右键单击文本和“检查元素”将焦点直接放在检查器面板中的正文元素上......对我来说看起来像一个 Firefox 错误。如果您没有绝对定位跨度，也许您可以解决这个问题 - 并在按钮中插入第二个元素以创建灰色形状（以便标签可以在它下方而不必诉诸绝对定位，这似乎是问题的根本原因在这里。）

标签： javascript css firefox css-position

【解决方案1】：

你有没有试过在标签的点击事件中写“e.stoppropagation()”。这将阻止标签将事件推送给其父级。

更新：我尝试将点击事件绑定到您的标签，它可以正常工作，

$('.item-title').on('click',function(){
alert('test this')});

【讨论】：

这并没有提供问题的答案
这让我意识到这是一个 Firefox 特定的问题。

【解决方案2】：

编辑你的 Css 代码：

.item-button {
            position: relative;
            width: 110px;
            height: 150px;
            background: #eee;
            border: #fff solid 2px;
            box-shadow: 0 0 10px #ccc;
            transition: all 0.5s ease;
            margin: 25px;
            margin-bottom: 40px;
            z-index : 888;

        }
        .item-button:hover {
                color: black;
                text-shadow: 1px 1px #fff;
                border: #fff solid 2px;
                box-shadow: 0 0 20px #999;
        }
        .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%;
            height: 100%;
            text-align: center;
            font-size: 10pt;
            line-height: 15px;
            z-index: 999;
        }

【讨论】：