1

私は HTML と CSS にまったく慣れていません。Web サイトを作成する過程で、HTML と CSS を習得してきました。私のポートフォリオページまではかなり順調に進んでいます。私の問題は、タイトルとプロジェクトの簡単な説明を含むすべての作品を表示するポートフォリオホームページを作成し、CSSをスタイルして画像を変更したことです。ホバーしてライトアップし（にもかかわらずシートを使用して画像の位置を移動します）、タイトルと説明が青色に変わります。私の問題は、これらすべての要素またはセクションの子を同時にアクティブにすることですマウスがセクションにホバーされたとき、現時点ではホバー効果は各子の上にホバーしたときにのみ機能します。

私は解決策を何年も探してきましたが、何も見つからないようです。この問題について助けていただければ幸いです。おそらく非常に簡単な修正ですが、私はWeb開発に非常に慣れていないので、行き詰まっています!

これがセクションのHTMLです

`<section id="port1">
<a href="tempura.html">
<div id="image1"></div>
<h3>TEMPURA</h3>
<p>Branding project incorporating the japanese culture and an animal as the key elements to       represent the brand.</p>
</a>
</section>`

そしてここにCSSがあります

`#port1 {
width:247px;
height:280px;
float:left;
background-color:#FFF;
text-decoration:none;

}

#port1 a {
text-decoration:none;

}

#image1 {
height:150px;
width:227px;
background-image:url(../images/Tempuraimg.jpg);
background-position:top left;
margin:10px;
float:left;

}

#image1:hover {
background-position:bottom left;

}

#port1 h3 {
font-size:10pt; 
font-family:"Helvetica", Arial, sans-serif;
font-weight:bold;
color:#333;
margin-left:10px;
margin-right:10px;
padding-bottom:5px;
padding-top:5px;
border-bottom:1px dotted #999;
text-decoration:none;

}

#port1 h3:hover {
color:#09F;

}

#port1 p {
font-size:8pt;  
font-family:"Helvetica", Arial, sans-serif;
font-weight:200;
color:#999;
padding-top:10px;
margin-left:10px;
margin-right:10px;
text-decoration:none;

}

#port1 p:hover {
color:#0099FF;

}`

最後に、これはこれまでの私のウェブサイトで、ページは質問です、ポートフォリオページはここにリンクがあります

http://mattwilsongraphicdesigns.co.uk/portfolio.html

あなたが私を助けることができると思うなら、私はとても感謝しています

幸運をお祈りしています

マット・ウィルソン

4

2 に答える 2

1

親に:hoverを与えて、child'sそれに応じてスタイルを変更します。次のように書きます。

#port1:hover p,
#port1:hover h3{
 color:#0099FF;
}

#port1:hover #image1{
 background-position:bottom left;
}
于 2012-08-28T11:29:34.067 に答える
0

ID を使いすぎているため、あなたのやり方は正直に言うと最善の方法ではありません。ID の代わりに単純にクラスを使用できます... port1、port2、port3 の代わりに ... 同じルールを何度も書き直す代わりに、単純に class="port" を使用できます。CSS は、何度も何度も使用できる再利用可能なルールを作成することによる作業と労力の量に関するものです。

CSS についてもっと読む必要があります。HTML Dog の CSS Beginner Tutorialsを確認することをお勧めします。

いずれにせよ、これはあなたがやりたいことを達成する方法です。これは、アンカー要素以外では :hover を認識しないため、IE6 を除くすべてのブラウザーで機能します。

#wrapper section:hover p,
#wrapper section:hover h3 {
    color:#0099FF;
}

#wrapper #image1{
    background-position:bottom left;
}

または、#image1、#image2 ... などの代わりに、このセレクターを使用してイメージ コンテナーを 1 回使用することもできます。

div[id^=image] {
    background-position:bottom left;
}
于 2012-08-28T11:25:18.780 に答える