2

問題: アイデアは、ホバー時にコンテンツの色を変更する div です。テキストと画像 (スプライト) の色が異なるポイントで変化することを除きます。'address' div の上にホバーしたテキストと 'addressicon' div の上の画像。「アドレス」divにカーソルを合わせると、両方を変更する方法を知っている人はいますか。

HTML: 

<section id="gallery">
    <div class="container" style="padding-top:40px;">

        <div class="address"><div class="title"><span>Address</span></div><br>
            <div class="addressicon"></div>
            <p><br>Address1<br>
            Address2<br>
            Address3<br>
            Area<br>
            City<br>
            PostCode
            </p>
        </div>

        <div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>
        <div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>

    </div>
  </section>

CSS:

.address {
width:33%;
height:400px;
display:inline-block;
background-color:#CCC;
color:#bcb7af;}

.address:hover {color:#000000;}

.address span {
color:#bcb7af;
align:center;
font-size:24px;
width:100%;}

.address:hover span {
color:#000000;}

.title {text-align:center;}

.addressicon {
background: url(../images/address.png) bottom;
width:202px;
height:130px;
margin: 0px auto;}

.addressicon:hover {
background-position: 0 0;}

どうもありがとう

問題解決 新しい CSS:

.address > .addressicon {
    background: url(../images/address.png) bottom;}

.address:hover > .addressicon, {
    background-position: 0 0;}
4

1 に答える 1

0 
.address:hover > .addressicon {
    color: SOMETHING;
}

そして、div空のままにしないでください。を入れて&nbsp;、愚かな振る舞いを防ぎます。

于 2013-03-01T10:07:50.237 に答える