html - 选项卡的不同悬停效果

Question

在我的网站上，我有 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');
}

Answer 1

您可以使用 comb css 为每个 div 分配单独的图像:

.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');}