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

我正在尝试修改此网站上的幻灯片：

在幻灯片上，当鼠标悬停在某个特色项目上时，我想修改另一个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 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;
}

演示：

---

这将更容易在将来维护。

您正在尝试更改父对象在子对象悬停时的css。这不可能通过纯css实现。我的建议是，你可以做相反的事情。在父对象悬停时更改子对象的背景以及它自己的背景

 ul.ui-tabs-nav li:hover{ 
    background: url('/themes/livramentolc/images/selected-item.png') top left no-repeat !Important;
}

ul.ui-tabs-nav li:hover a{
  background:#ffd503 !important;
}

什么是“幻灯片”？我想你的问题会更清楚，如果你用“我想在其他div_id上移动时更改div_id”，这样我们就能确切地知道你在问什么，don；你不必扫描整个代码。试着阅读：好吧，当我说“#div_d”和“#other_div_id”时，我的意思是你给了你想要更改的元素的实际id，完全按照我在前面的评论中所说的那样重新编写你的帖子只是一个模糊的想法。。。

 ul.ui-tabs-nav li:hover{ 
    background: url('/themes/livramentolc/images/selected-item.png') top left no-repeat !Important;
}

ul.ui-tabs-nav li:hover a{
  background:#ffd503 !important;
}