html - 将鼠标悬停在#nav-fragment-1 上时，我想更改#featured ul.ui-tabs-nav

Question

我正在尝试修改此站点上的幻灯片:

http://www.livramentolc.com.br/

在幻灯片上，当鼠标悬停在一个特色元素上时，我想修改另一个div的图像背景。

HTML:

            <div id="featured" >

                      <ul class="ui-tabs-nav">
                        <li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><span><p></p><h1>Tudo em até 6x sem juros.</h1><p>Parcele sua compra aqui.</p></span></a></li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span><p></p><h1>Compre com BNDES</h1><p>Aceitamos financiamento BNDES. Não perca tempo.</p></span></a></li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span><p></p><h1>Procurando mão-de-obra?</h1><p>Veja a lista que preparamos.</p></span></a></li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span><p></p><h1>Tipos de Tinta para Parede</h1><p>Saiba mais do assunto.</p></span></a></li>
                      </ul>

                    <!-- First Content -->
                    <div id="fragment-1" class="ui-tabs-panel" style="">
                        <a href="<{$xoops_url}>/modules/publisher/item.php?itemid=8"><img src="<{$xoops_url}>/themes/livramentolc/images/image1.jpg" alt="" /></a>
                         <!--div class="info" >
                            <h2><a href="#" >Dicas de construção</a></h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
                         </div-->
                    </div>

                    <!-- Second Content -->
                    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
                        <a href="<{$xoops_url}>/modules/publisher/item.php?itemid=9"><img src="<{$xoops_url}>/themes/livramentolc/images/image2.jpg" alt="" /></a>
                    </div>

                    <!-- Third Content -->
                    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
                        <a href="<{$xoops_url}>/modules/profissionais/"><img src="<{$xoops_url}>/themes/livramentolc/images/image3.jpg" alt="" /></a>
                    </div>

                    <!-- Fourth Content -->
                    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
                        <a href="<{$xoops_url}>/modules/xpressme/"><img src="<{$xoops_url}>/themes/livramentolc/images/image4.jpg" alt="" /></a>
                    </div>
            </div>

CSS:

            #featured{ 
                width: 680px;
                padding-right: 260px;
                position: relative; 
                height: 325px; 
                overflow: hidden;
                background: #fff;
                font: bold 15px 'Roboto', sans-serif;
                margin-left:    -11px;
            }
            #featured ul.ui-tabs-nav{ 
                background: url('../images/unselected-item.png') no-repeat top left;
                position: absolute; 
                top: 0; 
                left: 700px;
                list-style: none; 
                padding: 0;
                margin: 0; 
                width: 236px; 
                height: 330px;
                overflow: auto;
                overflow-x: hidden;
            /*    -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
            */
            }
            #featured ul.ui-tabs-nav li{ 
                padding:1px 0; 
                padding-left:8px; 
                color:#666;
            }
            #featured ul.ui-tabs-nav li img{ 
                float:left; 
                margin:2px 5px; 
                background:#fff; 
                padding:2px; 
                border:1px solid #eee;
            }
            #featured ul.ui-tabs-nav li span{
                font-size:11px; 
                line-height:18px;
            }
            #featured li.ui-tabs-nav-item a{ 
            /*  display:block; 
                height:75px; 
                text-decoration:none;
                color:#333;  
                background:#ececec; 
                line-height:20px; 
                padding-left: 5px;
                margin-left: 32px;
                outline:none; */
            display:block; 
            height:75px; 
            text-decoration:none;
            color:#333;  
            background:#ececec; 
            line-height:20px; 
            padding-left: 5px;
            margin-left: 35px;
            margin-bottom: 5px;
            }
            #featured li.ui-tabs-nav-item p{ 
                text-decoration:none;
                background: transparent;
                color:#333;
                padding-top:    5px;
                font: 12px 'Roboto', sans-serif;
            }
            #featured li.ui-tabs-nav-item a:hover {
                background:#ffd503;
            }
            #featured .ui-tabs-nav-item  span{ 
                margin-top: 10px;
            }
            #featured li.ui-tabs-selected, #featured li.ui-tabs-active{ 
                background:url('../images/selected-item.png') top left no-repeat;
            }
            #featured ul.ui-tabs-nav li.ui-tabs-selected a, #featured ul.ui-tabs-nav li.ui-tabs-active a{ 
                background:#ffd503;
            }
            #featured .ui-tabs-panel{ 
                width:400px; 
                height:250px; 
                background:#999; 
                position:relative;
            }
            #featured .ui-tabs-panel .info{ 
                position:absolute; 
                bottom:-60px; 
                left:10px; 
                height:70px; 
                width: 490px;
                background: url('../images/transparent-bg.png'); 
            }
            #featured .ui-tabs-panel .info a.hideshow{
                position:absolute; 
                font-size:11px; 
                font-family:Verdana; 
                color:#f0f0f0; 
                right:10px; 
                top:-20px; 
                line-height:20px; 
                margin:0; 
                outline:none; 
                background:#333;
            }
            #featured .info h2{ 
                font-size:1.2em; 
                font-family:Georgia, serif; 
                color:#fff; 
                padding:5px; 
                margin:0; 
                font-weight:normal;
                overflow:hidden; 
                width: 390px;
            }
            #featured .info p{ 
                margin:0 5px; 
                font-family:Verdana; 
                font-size:11px; 
                line-height:15px; 
                color:#000;
            }
            #featured .info a{ 
                text-decoration:none; 
                color:#fff; 
            }
            #featured .info a:hover{ 
                text-decoration:underline; 
            }
            #featured .ui-tabs-hide{ 
                display:none; 
            }

想要改变这个背景:

Answer 1

这可以在不使用图像的情况下实现:

/* CSS 2 */
#css2 i {
    position: absolute;
    right: 150px;
    border: solid 25px transparent;
    border-right-color: yellow;
} 

/* CSS 3 */
#css3 .content:before {
    content: "";
    position: absolute;
    right: 150px;
    border: solid 25px transparent;
    border-right-color: yellow;
}

/* The hover */
.container:hover .content {
    background: green;
}
#css2:hover i, #css3:hover .content:before {
    border-right-color: green;
}

演示:Here

这将在未来更容易维护。