如何给背景图片可点击使用JS

Question

<div class="feedback-header"><h3>FEEDBACK</h3></div> 

CSS

.feedback-header 
     { 
      border-bottom:1px solid #494c4d; 
      padding:8px 20px 1px  20px; 
      background:url(/_assets/img/common/btn-rt-arrow.png) 373px 25px no-repeat; 
      position:absolute; 
      width:381px 

}

我在右侧的箭头，我需要做的箭头点击能够用于应用JS

Answer 1

无法在CSS属性中添加事件。

您只能将事件添加到DOM元素。你的情况，你可以点击事件添加到任何类.feedback-header或特定元素有class='feedback-header'

添加点击到所有具有class='feedback-header'

$(body).on('click', '.feedback-header', function(e){ 
    .... 
}); 

元素的点击也将元素应用了将来会被jQuery分配这个类。

Answer 2

由于WDever指出的那样，你不能（除非您使用的影像地图）使背景图像可点击的一部分，但你可以做的是插入背景图片作为image标签在feedback-header DIV并作出点击：

HTML

<div class="feedback-header"> 
    <img src="/_assets/img/common/btn-rt-arrow.png" /> 
    <h3>FEEDBACK</h3> 
</div> 

CSS

.feedback-header{ 
      border-bottom:1px solid #494c4d; 
      padding:8px 20px 1px 20px; 
      background:transparent none; 
      position:absolute; 
      width:381px; 
} 
.feedback-header img, h3 { display: inline; margin-right: 20px; } 

个

JS

$('div.feedback-header').on('click', 'img', function(){ 
     // Kill aliens and save the world here! 
    }); 

Answer 3

可以使钩一些技巧去做。像

<table style="background:url(/_assets/img/common/btn-rt-arrow.png)"> 
<tr> 
    <td> 
    Background arrow image' left side should be the same color as the element 
    </td> 
    <td id="arrow" onclick="FunctionToCall('this')"> 
    Your arrow sign should extend here. 
    </td> 
</tr> 
</table> 

function FunctionToCall() { 
// write here 
}