jQuery单击问题，跨度样式看起来像一个按钮

Question

上下文

我有这个按钮：

我检测到用户点击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() { ... });

Answer 1

您可以尝试增加按钮的填充，以使<span>与图像的尺寸相匹配，但我认为最佳解决方案是更改标记并实际使用<button>

Answer 2

它似乎适用于最新版本的FF和IE，但不适用于Chrome，Opera和Safari（win）。我建议将display:block;添加到.rating-btn样式以查看其功能。

或者，实际使用按钮并根据自己的喜好设计样式。

Answer 3

使用parent附加处理程序

$('.rating:has(.rating-btn)').click(function() { ... });