上下文
我有这个按钮:
我检测用户何时使用 jQuery .click()
单击。
但只有当用户点击文本时它才有效(“imdb”/“rottenTomatoes”)。
如果用户单击蓝色按钮,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>
关于html - jQuery 单击问题,跨度样式看起来像按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9704814/