0

私の Web サイトでは、ホリデー ホスピタリティ イベント、コンサルティングという名前のホームに 4 つのタブがあります。私がしようとしているのは、画像を表示したいタブのホバーです。私はこのようにしてみました。

私のhtml：

<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>H</b>olidays</a>

    </div>
</div>
<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>H</b>ospitality</a>

    </div>
</div>
<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>E</b>vents</a>

    </div>
</div>
<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>C</b>onsultant</a>

    </div>
</div>

私のCSS：

.menu_links {
    height:85px;
    width:250px;
    float:left;
    margin:5px 0px 0px 0px;
}
.menu_links a {
    float:left;
    width:150px;
    margin:5px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    text-align:center;
    color:#000000;
    text-decoration:none;
}
.menu_links:hover {
    width:250px;
    height:183px;
    top:50px;
    background: #FF9933;
    font-size:25px;
    z-index:9999;
    background-image:url('../images/holidays_bg.jpg');
}
4

3 に答える 3

1

次のように、各 div に個別の画像を割り当てるために、comb css を使用できます。

.menu_links:hover {background-image:url('../images/holidays_bg.jpg');}
.menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');}
.menu_links + .menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');}
.menu_links + .menu_links + .menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');}
于 2013-07-29T15:06:56.927 に答える
1

概念は、メニュー項目ごとに別のクラスを追加し、それぞれに一意の名前を付け、それらのクラスを使用して各メニューの背景プロパティを個別に設定することです。

ここにあなたのコードがあります

<div class="menu_links first">            
                    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">                  
                        <a href="javascript:void(0);"><b>H</b>ospitality</a>
                    </div>
</div>
<div class="menu_links second">    
                    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">                  
                        <a href="javascript:void(0);"><b>E</b>vents</a>
                    </div>
</div>
 <div class="menu_links third">            
                    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">                      
                        <a href="javascript:void(0);"><b>C</b>onsultant</a>
 </div>

対応する css はホバー用になります。

ホバーのCSSを除いて、すべてのCSSは同じままです

.first:hover{ width:250px; height:183px; top:50px; background: #FF9933; font-size:25px; z-index:9999; background-image:url('../images/holidays_bg.jpg');}
 .second:hover{ width:250px; height:183px; top:50px; background: #BB7733; font-size:25px; z-index:9999; background-image:url('../images/holidays_bg.jpg');}
 .third:hover{ width:250px; height:183px; top:50px; background: #557733; font-size:25px; z-index:9999; background-image:url('../images/holidays_bg.jpg');}

ここで確認できます:: FIDDLE

于 2013-07-29T15:14:09.637 に答える
1

html 側:

    <ul class="menu_links">
        <li class="holi"> <a href="holidays.html"><b>H</b>olidays</a>

        </li>
        <li class="hospi"> <a href="hospitaliy.html"><b>H</b>ospitality</a>

        </li>
        <li class="events"> <a href="events.html"><b>E</b>vents</a>

        </li>
        <li class="consult"> <a href="consultant.html"><b>C</b>onsultant</a>

        </li>
    </ul>

そしてcss側

    ul.menu_links {
        overflow:auto;
        list-style-type:none
    }
    .menu_links li a {
        float:left;
        width:100px;
        display:block;
        background:orange none scroll repeat 0 bottom;
        font-family:Trebuchet MS;
        color:black;
        text-decoration:none;
        margin:2px 5px;
        padding:10px;
        text-align:center
    }
    .menu_links li a:hover {
        color:#444
    }
    .menu_links li.holi a:hover {
        background-image:url(http://lorempixel.com/150/50/abstract/);
    }
    .menu_links li.hospi a:hover {
        background-image:url(http://lorempixel.com/150/50/cats/);
    }
    .menu_links li.events a:hover {
        background-image:url(http://lorempixel.com/150/50/people/);
    }
    .menu_links li.consult a:hover {
        background-image:url(http://lorempixel.com/150/50/sports/);
    }

jsfiddle で表示します: http://jsfiddle.net/gJx25/

于 2013-07-29T15:14:21.263 に答える