2

control-buttnosのインターフェースは、デフォルトのブラウザーのスタイルでリリースされています。画像を値として標準ボタン（）を使用しようとしています

HTML：

<div id="control-play" class="button"><span></span><input type="button" value=""/></div>

CSS：

#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;}

しかしもちろん、カーソルが画像にカーソルを合わせると、：hoverイベントで問題が発生します。

状況

JSでは、画像のonClickをキャッチすることでクリックをアクティブにできます。

$('#control-play span').click(function(){$(this).parent().find('input').click();})

しかし、onHoverイベントではそれを行うことはできません。

ご覧のとおり、私は：hover {}スタイルと：active（）スタイルを模倣せず、デフォルトのスタイルを使用しています。画像を取得して背景として使用することはできましたが、それは良いスタイルのトリックではないようです。

それで、同僚、何かアイデアはありますか？jQuery、CSS3、HTML5のいずれでも大歓迎です。

UPD：慎重に言及しましたが、ほとんどの回答はボタンの背景全体を切り替えることを示唆しています。注：私はブラウザのスタイルのボタンを使用しています。テキストラベルの代わりに16x16のアイコンを使用しようとしています。

4

5 に答える 5

3 
<div class="button">
//height and width of this DIV should be same as `input[button]`
  <input type="button" />
</div>

<style>
.button{
   background: url("your_normal_image.jpg") no-repeat 0 0;
   height: 123px;
   width: 123px;
   }
.button:hover, .button.some_class{
   background: url("your_hover_image.jpg") no-repeat 0 0;
   }
.button input[type="button"]{
   opacity: 0;}

</style>

クリックされたイベントの場合、Jqueryを使用して追加.some_classします-コードは次のようになります.button

  <div class="button some_class">
    //toggle between  ".some_class"

      <input type="button" />
    </div>

もう 1 つの方法は、イメージ スプライト メソッドをbackground-position:使用してクラスを追加する代わりに、スタイルで遊ぶことです。詳細については、イメージ スプライトの記事を参照してください。.someclass

于 2012-08-16T14:09:38.160 に答える
1

非常にうまく機能する3つのcssアクションがあります
注： !important は、この部分の優先度を高くすることにより、背景を強制的に変更します

<style>
.button{
   background: url("background.png") no-repeat 0 0;
   height: 123px;
   width: 123px;
   border:0;   // this part is important otherwise it leaves the borders
   }
.button:hover{
  background: url("background.png") no-repeat -123px 0 !important ;
  }  //moves the bg image up
.button:active{
   background: url("background.png") no-repeat -246px 0 !important ;
  } //move the bg up  more when yu push the button
</style>

初心者の場合は、最初のホバーまたはクリックで読み込みの遅延が発生する 3 つの個別の画像を使用できます。

<style>
.button{
   background: url("background.png") no-repeat 0 0;
   height: 123px;
   width: 123px;
   border:0;   // this part is important otherwise it leaves the borders
   }
.button:hover{background: url("background1.png") no-repeat 0 0 !important;}   
.button:active{background: url("background2.png") no-repeat -246px 0 !important ;}  
</style>
于 2012-08-16T14:34:31.603 に答える
0

最もセマンティックな方法は次のとおりです。

HTML:

<input type="button" class="button" value="Submit" />

また

<button type="submit" class="button">Submit</button>

CSS:

.button {
display: block;
width: 16px;
height: 16px;
background: url('../i/ruler/play.png') top left;
border: 0;
}

.button:hover {
background-position: bottom;
cursor: pointer;
}

そうすれば、Javascript に依存する必要がなくなります (Javascript をオフにすることもできます..)

于 2012-08-16T14:32:46.750 に答える
0

最も適切な答えは、<button>...</button>代わりにHTML5 を使用することです。<input type=button value=""/>

HTML:

<button type="button" id="control-play" title="Play"><span></span></button>

CSS:

button#control-play {width: 50px; height: 49px;}
button#control-play span {display: inline-block; background: url('../i/ruler/play.png') no-repeat;}

スプライトには必要ありません。3 つの背景は、ボタンの標準ブラウザの機会を模倣するためのものです。誰もがこれらのボタンを好みのスタイルで (ブラウザのスキンを使用する場合でも) 使用し、私のアイコンだけが永続的になります。

Pointyのコメント経由。

于 2012-08-17T06:07:25.310 に答える
0

私の理解が正しければ... あなたはスプライトを使いたいと思っています。スプライトは、ホバー BG と標準 BG の両方を 1 つの画像に持つ背景画像です。この場合、16px x 16px の両方の画像が 1 つの画像ファイルに含まれ、合計幅が 32px x 16px になります。

次に、CSS を使用して背景の位置を切り替えるだけで、CSS だけでスムーズなホバー効果を作成できます。

#control-play span 
{
    background-image: url('../i/ruler/play.png');
    width:16px;
    height:16px;
    background-position: 16px 0px;
}

#control-play span:hover
{
    background-position: -16px 0px;
}
于 2012-08-16T14:11:25.200 に答える