jquery - 如何为使用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-headerdiv 并使其可点击：

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
 }