http://cascade2.hostei.com/collection.htmlにアクセスすると、
シャンデリアの写真にカーソルを合わせると、グループ全体が灰色から青色に変わることに気付くでしょう。しかし、その下のキャプションにカーソルを合わせると、キャプションだけが青色に変わることに気付くでしょう。
キャプションにカーソルを合わせると、画像の境界線も青色になるように変更するにはどうすればよいですか? できれば HTML または CSS で。
シャドウと他のすべてのエラーを無視します。HTML:
<center>
<figure class=cheese>
<a class=cheese href="images/cascadelucecatalog.pdf">
<center><img src="images/cataloguefront.jpg" width="400" height="398" alt=""/>
</center><figcaption>
<h2><p>2013 Cascade Luce Catalog</p></h2></figcaption></a>
</figure></center>
CSS:
.cheese {
background-color: #4D4D4D;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
color: #FFF;
}
.cheese p{
color: #FFF;
}
.cheese:hover, .cheese:active, .cheese:focus, .cheese :hover, .cheese :active, .cheese :focus{
text-decoration: none;
background-color: #43A6CB;
}