上下文
我有这个按钮:
当用户点击jQuery.click()
时,我会检测到。
但它只有在用户点击文本(“imdb/”rottentomotoes”)时才起作用。
如果用户单击蓝色的of按钮,jQuery什么也检测不到。
你可以试试http://promobluray.fr。
问题
怎么了?
如何让它像按钮一样工作?
代码
html:
<span class="rating">
<span class="rating-btn imdb active">imdb</span>
<span class="rating-btn rt">rottenTomatoes</span>
</span>
css:
.rating {
padding: 14px;
}
.rating-btn {
display: inline-block;
margin-top: 24px;
padding: 4px;
position: relative;
font-family: 'Open Sans',sans-serif;
font-size: 12px;
text-decoration: none;
color: white;
cursor: pointer;
background-image: -o-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: -moz-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: -webkit-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: -ms-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: linear-gradient(bottom,#2CA0CA 0,#08C 100%);
-webkit-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
-moz-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
border-radius: 5px;
}
.rating-btn::before {
background-color: #072239;
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 4px;
left: -2px;
top: 5px;
z-index: -1;
border-radius: 6px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
}
.active {
background: #2CA0CA;
-webkit-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
-moz-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
top: 7px;
cursor: default;
}
.imdb {
margin-right: 5px;
}
jquery:
$('.rating-btn').click(function() { ... });
最佳答案
您可以尝试增加按钮的填充,使<span>
与图像的维度匹配,但我认为最好的解决方案是更改标记并实际使用<button>