如何仅为背景提供课程名称？

Question

我的背景图片有width:118px，点击背景图片我想要执行一些jquery，我不能使用<a>标记。如何只在cursor:pointer上制作background以及如何仅为背景提供类名？可能吗？如何？

<div id="post1_img"></div>

    #post1_img
 {
    width:280px;
height:33px;
background:url(../images/assets/pullTab-readMore-off-.png) no-repeat top center;
clear:both;
  }

修改

点击阅读更多我想执行某些操作，是否可以不创建任何额外的div

width of div:280px;

width of image:118px;

http://jsfiddle.net/prash/A8FWa/

Answer 1

嘿，现在习惯了你的css中的after属性

<div id="post1_img"></div>

<强>的CSS

 #post1_img
 {
    width:280px;
height:33px;
background:url(http://www.gravatar.com/avatar/9932debdde3decc7726b508f43d57438?s=32&d=identicon&r=PG) no-repeat top center;
clear:both;
    border:1px solid black;
    position:relative;
  }


 #post1_img:after{
content:'';
position:absolute;
top:0;
left:50%;
margin-left:-16px;
width:32px;
height:33px;
cursor:pointer;    
}

Live demo

Answer 2

你不能只为html元素添加一个类名到背景图像，但是有一些解决方法。我建议你把图像放在div中并使用cursor：pointer;和位置：绝对;并设置z-index：-1;并将另一个div叠加在它上面。

现在我看到了你的更新和屏幕截图，你所要做的就是在页面部分浮动一个绝对div，其中包括：

#bgmask{
    width:70px;
    height:70px;
    position: absolute;
    right:10%;
    top: 0;
    z-index:999;
    cursor:pointer;
}

这是一个JSFIDDLE：http://jsfiddle.net/collabcoders/xLx68/1/

Answer 3

您将cursor: pointer放入CSS类post1_img中，然后将cursor: <something else>放入其中所有内容的样式/ CSS中。

示例，如果您的DIV只包含一个表单（所以所有内容都是input的{​​{1}}元素）：

type

至于给出背景的类名，这是不可能的，因为背景本身不是HTML元素。

编辑：修复了第二个css块中的#post1_img { cursor:pointer; width:280px; height:33px; background:url(../images/assets/pullTab-readMore-off-.png) no-repeat top center; clear:both; } #post1_img input { cursor: auto; /*just an example*/ }

Answer 4

您可以将背景图像作为与图像具有相同尺寸的div的背景。然后把这个div放在另一个div的中心。

<div id="outer">
  <div id="post1_img">
   </div>
</div>

//css
#post1_img{
   width:70px;
   cursor:pointer;
   background:url(pullTab-readMore-off-.png) no-repeat top center;
   /*you need more css here to adjust this div to be center of the outer div*/
}
#outer{
   width:280px;
}

//jquery
$('#post1_img').click(function(){
    //do something
});