1

我的背景图片有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/

4

4 回答 4

2

嘿，现在习惯 after了你的 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;    
}

现场演示

于 2012-08-01T09:04:23.157 回答
1

您不能将类名放在仅背景图像的 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/

于 2012-08-01T09:09:32.360 回答
1

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

例如，如果您的 DIV 仅包含一个表单（所以一切都是inputdifferent 的元素type）：

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

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

编辑：修复了cursor第二个 CSS 块中的

于 2012-08-01T09:10:05.463 回答
1

您可以将背景图像作为与图像具有相同尺寸的 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
});
于 2012-08-01T09:17:10.573 回答