Html 选项卡的不同悬停效果

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

---

您可以使用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');}

---

您可以使用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');}

---

其概念是为每个菜单项添加另一个类，该类将为每个菜单项提供唯一的名称，并通过使用这些类分别为每个菜单设置背景属性

这是您的代码

<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>

    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/);
    }

---

您可以在此处查看：：

概念是为每个菜单项添加另一个类，该类将为每个菜单项提供唯一的名称，并通过使用这些类分别为每个菜单设置背景属性

这是您的代码

<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>

    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/);
    }

---

您可以在这里查看：：

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>

---

在JSFIDLE中查看它：

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>

---

在JSFIDLE中查看：

你是在问如何在每次悬停时生成随机图像翻转吗？不，我有每个选项卡的图像我不知道如何为悬停时的选项卡分配图像你是在问如何在每次悬停时生成随机图像翻转吗？不，我有每个标签的图像，我不知道如何为悬停的标签分配它