如何仅为背景提供类名？

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

编辑

enter image description here

点击阅读更多的我想执行一些动作，是否有可能不会产生任何额外的div

width of div:280px; 

width of image:118px;

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

做

来源

2012-08-01 Prashobh

你是什么意思点击背景？背景不是元素的属性？ – bingjie2680 2012-08-01 09:08:21

背景是图像，它在div的中心，点击图像我想执行一个jquery – Prashobh 2012-08-01 09:10:24

现在我明白你的意思了。 – bingjie2680 2012-08-01 09:12:06

可以把背景图像具有与图像相同的尺寸一个div的背景的cursor。然后将这个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-01 09:17:10 bingjie2680

很好，但我想为此创建一个额外的div。 – Prashobh 2012-08-01 09:22:25

哪个额外的div ??? – bingjie2680 2012-08-01 09:23:10

嘿，现在用来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;  
}

Live demo

来源

2012-08-01 09:04:23

然后它会显示整个div，我的div宽度是280px;，背景是在中心宽度：70px; – Prashobh 2012-08-01 09:08:42

现在给你的背景位置：在你的div – 2012-08-01 09:10:32

我已经给出背景位置 – Prashobh 2012-08-01 09:14:32

你不能把一个类名背景图像只有html元素，但也有一些工作。我建议你把图像放在div中并使用cursor：pointer;和位置：绝对;并设置z-index：-1;并在其上覆盖另一个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-01 09:09:32 johnnyarguelles

可以请你详细说明这一点。 – Prashobh 2012-08-01 09:23:21

请参阅小提琴的工作示例。 thx – johnnyarguelles 2012-08-01 09:26:26

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

例如，如果你的DIV包含只是一种形式（所以一切都不同了type的input元素）：

#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元素本身。

编辑：固定在第二块的CSS

来源

2012-08-01 09:10:05 Alex

尝试过，不幸的是不工作 – Prashobh 2012-08-01 09:16:30

奇怪的是，它适用于我 - > http://jsfiddle.net/gDyp9/2/（运行并将鼠标移动到灰色区域和文本框上）。请注意，它*只处理鼠标光标问题。 – Alex 2012-08-01 09:33:36

如何仅为背景提供类名？

回答

相关问题