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

cursor: pointerCSS クラス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 要素自体ではないためです。

編集: cursor2 番目の css ブロックを修正しました

于 2012-08-01T09:10:05.463 に答える
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

背景画像を、画像と同じ寸法を持つ 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 に答える