語境

我有這個按鈕：與風格跨度jQuery的點擊問題，看起來像一個按鈕

enter image description here

我當用戶使用jQuery .click()點擊檢測。

但它的工作原理只有在用戶點擊文本（「IMDB 」/「 爛番茄」）。

如果用戶點擊按鈕的藍色，jQuery沒有檢測到任何東西。

enter image description here

您可以嘗試在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() { ... });

來源

2012-03-14 GG.

那些不是按鈕。這些跨度的樣式看起來像按鈕，但它們的尺寸仍然只是文本的高度和寬度（加上任何填充），這就是爲什麼這是註冊點擊事件的唯一區域。 – 2012-03-14 15:27:07

我會嘗試使用按鈕。 – 2012-03-14 15:32:53

你可以嘗試增加按鈕的填充，使得<span>圖像的尺寸相匹配，但我認爲，最好的解決辦法是改變你的標記和實際使用<button>

來源

2012-03-14 15:34:17

這似乎在FF和IE瀏覽器的最新版本的工作，而不是瀏覽器，Opera和Safari（勝利）。我建議將display:block;添加到.rating-btn樣式以查看它的功能。

另外，實際上使用按鈕和風格那些你想要的。

來源

2012-03-14 15:33:15 Deadlykipper

使用父附加處理程序

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

來源

2012-03-14 15:36:50 charlietfl

與風格跨度jQuery的點擊問題，看起來像一個按鈕

語境

問題

代碼

回答

相關問題