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元素添加事件。在您的情况下，您可以将click事件添加到类.feedback-header或具有class='feedback-header'的特定元素

添加点击以查看具有class='feedback-header'

的所有元素

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

点击也将应用于将来由jQuery分配给该类的元素。

Answer 2

正如WDever指出的那样，你不能让背景图像的一部分可以点击（除非你使用的是图像地图），但你可以做的是将背景图像作为image标记插入{{ 1}} div并使其可点击：

<强> HTML

feedback-header

<强> CSS

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

<强> JS

.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; }

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
 }

如何使用js提供可点击的背景图像

3 个答案: