我通过使用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')});