我通过使用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中正常工作。

最佳答案

您是否尝试在标签的click事件中编写“ e.stoppropagation()”。这将停止标签向其父母推送事件。

更新:我尝试将click事件绑定到您的标签,并且该事件可以正常运行,

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

07-24 09:50
查看更多