0

マウスオーバーで画像を別の画像に変更しようとしています。具体的には、訪問者がこれにカーソルを合わせると、次のようになります。

ここに画像の説明を入力してください

画像は次のように変わります。

ここに画像の説明を入力してください

現在のコード

できるだけ軽量にしたいと思います。しかし、画像と背景のCSSはうまくいきません。私のコードは次のとおりです。

<div id="featured-box-right"><a href="/videos/"  
target="_self"><img src="../images/box-featured-home-right.png" title="videos" 
alt="videos" width="300" height="150"></a></div>

しかし、これをCSSに対して行うと、次のようになります。

#featured-box-right a:hover
{
background-image: url(../images/box-featured-home-right-hover.png); 
}

効果は正しくありません。それは背景ではありません。実際の画像です。これを可能な限り軽量にする方法についてのガイダンスをいただければ幸いです。

4

7 に答える 7

2

軽量な方法は、CSSを使用しbackground-image、divのプロパティを使用することです。

jsFiddle

<div id="featured-box-right"></div>

CSS：

#featured-box-right {
    width: 300px;
    height: 150px;
    background-image: url('http://i.stack.imgur.com/OywDf.png'); 
}

#featured-box-right:hover {
    background-image: url('http://i.stack.imgur.com/aRJOk.png'); 
}
于 2013-02-24T03:56:22.690 に答える
1

タグを削除して<img>CSSバックグラウンドiamgeメソッドを使用できますが、2つの写真を1つに結合する必要があります（上に1つ、下に1つ）

次に、次のコードを使用する必要があります。

#featured-box-right {
    width: 300px;
    height: 150px;
    background-image: url(image url here) center top; 
}

#featured-box-right:hover {
    background-image: url(image url here) center bottom; 
}

この方法を使用すると、必要な画像は1つだけになります

于 2013-02-24T04:01:41.270 に答える
1

css画像スプライト手法を使用する必要があります。ここではimgタグを使用せず、cssbackgroundプロパティを使用してください。以下のことを試してみてください。cllass、id、または完全にあなた次第の親子関係を使用できます。

<div id="featured-box-right">
 <a href="/videos/" target="_self" id="img1"></a>
</div>

css：

#img1
{
    background: url(../images/box-featured-home-right.png); 
}

#img1:hover
{
  background: url(../images/box-featured-home-right-hover.png); 
}
于 2013-02-24T03:54:58.567 に答える
1

タグを完全に削除して、<img/>このcssを試してください。

#featured-box-right a {
  background-image: url(../images/box-featured-home-right.png); 
}
#featured-box-right a:hover {
  background-image: url(../images/box-featured-home-right-hover.png); 
}
于 2013-02-24T03:56:02.063 に答える
1

CSS Spritesbackground-imageは、設定された幅と高さを使用し、背景位置を調整して、表示する必要のある部分のみを表示する手法です。このようにして、単一の画像を使用し、さまざまなグラフィックを表示して、時間を節約server requestsおよび高速化できpage loadます。

HTML：

<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />

CSS：

.clip               { position: absolute; top: 0; left: 0; }

.pos-1              { clip:rect(0 48px 48px 0); }
.pos-2              { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3              { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4              { clip:rect(48px 96px 96px 48px); top: -48px; 
                      left: -48px; }

ここから取った

于 2013-02-24T03:56:28.510 に答える
1

画像（背景またはその他）は必要ありません。

これは、2つの画像を合わせたサイズのわずか3.84％になります： http：
//fiddle.jshell.net/gWytK/show/：

<！doctype html>
<html>
	<頭>
		<title> </ title>
		<スタイル>
体 {
	マージン：8px;
}
#links {
	リストスタイル：なし;
	マージン：0;
	パディング：0;
	表示：ブロック！重要;
	表示：インラインブロック;
	オーバーフロー：非表示;
}
#links li {
	フロート：左;
	幅：300px;
	高さ：150px;
	オーバーフロー：非表示;
	背景：＃000000;
	border-radius：20px;
}
#links a {
	表示ブロック;
	フォント：太字30px / 30px'comic sans ms'、sans-serif;
	パディング：40px 66px 100px;
	色：＃5496ff;
	テキスト装飾：なし;
	text-transform：大文字;
	text-shadow：0 0 100px #ffffff、0 0 100px #ffffff;
}
#links a：after {
	コンテンツ：'>>';
}
#links a：hover、
#links a：focus {
	色：＃1b1b1b;
	背景：＃5496ff;
	text-shadow：なし;
}
		</ style>
	</ head>
	<本体>
		<ul id = "links">
			<li>
				<ahref="videos/">私たちのビデオコレクション</a>
			</ li>
		</ ul>
	</ body>
</ html>
于 2013-02-24T04:58:41.077 に答える
0

imageCSSにプロパティはありません。目的の効果を得るには、それをHTMLコードに置き換えて、HTMLコードからタグbackground-imageを削除する必要があります。img

#featured-box-right
{
  background-image: url(../images/box-featured-home-right.png); 
}

#featured-box-right:hover
{
  background-image: url(../images/box-featured-home-right-hover.png); 
}
于 2013-02-24T03:55:06.370 に答える