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

My background image having width:118px,On clicking on background image i want to perform some jquery, i cant use <a> tag.How to make cursor:pointer only on background and how to give a class name only for the background? Is it possible? how?

我的背景图片宽度为:118px,点击背景图片我想执行一些jquery,我不能使用 tag.How如何制作光标:指针只在背景上以及如何仅为背景提供类名?可能吗?怎么样?

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

EDIT

clicking on read more i want to perform some action,Is it possible to do without creating any extra div

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

width of div:280px;

width of image:118px;

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

4 个解决方案

#1

you can put the background image as an background of a div which has the same dimension with the image. then place this div centered inside another div.

您可以将背景图像作为与图像具有相同尺寸的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
});

#2

Hey now used to after properties in your css

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

<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

#3

You put cursor: pointer in your CSS class post1_img and then you put cursor: <something else> in the style/CSS of everything that's inside it.

你将cursor:pointer放在你的CSS类post1_img中,然后将cursor: 放在它里面的所有内容的样式/ CSS中。

Example, if your DIV contains just a form (so everything is an input element of different type):

例如,如果您的DIV只包含一个表单(所以一切都是不同类型的输入元素):

#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*/
}

As for giving a class name for the background, it's not possible because the background is not an HTML element per-se.

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

EDIT: Fixed the cursor in the second css block

编辑:修复了第二个css块中的光标

#4

You cannot put a class name to a background image only html elements, but there are some work arounds. I would suggest you put the image in a div and use cursor:pointer; and position: absolute; and set the z-index: -1; and layer another div over it.

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

Now that I see your update and screen shot, all you have to do is float an absolute div over the section of the page with something like:

现在我看到了你的更新和屏幕截图,你所要做的就是在页面部分浮动一个绝对div,例如:

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

HERE IS A JSFIDDLE: http://jsfiddle.net/collabcoders/xLx68/1/

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