Question

我创建了一个按钮，看起来就像是一个带有标签的文档，通过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中正常使用。

Answer 1

你有没有试过写＆＃34; e.stoppropagation（）＆＃34;在标签的click事件中。这将阻止标签将事件推送给其父母。

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

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

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

重新定位的按钮文字无法点击

2 个答案: