I would like to change #featured ul.ui-tabs-nav when hovering over #nav-fragment-1

Question

I'm trying to modify the slide on this site:

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

on the slide, when hovering the mouse in a featured item, I would like to modify the image background of another div.

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

The 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; 
            }

Want to change this background:

error on hover

What is "the slide"? I think your question would be more clear if you phrased it as "I would like to change #div_id when hovering over #other_div_id" That way we know exactly what you are asking for and don;t have to scan your entire code. — Dryden Long, Feb 28 '14 at 21:55
Try reading : http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements — Dassina, Feb 28 '14 at 21:57
Ok, when I said "#div_d" and "#other_div_id" I meant the actual IDs you have given the elements you want to change, rewording your post to exactly as I said in an earlier comment is just a vague... — Dryden Long, Feb 28 '14 at 22:00

score 0 · Answer 1 · answered Feb 28 '14 at 22:07

This can be achieved with out using an image :

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

DEMO : Here

This will be far easier to maintain in the futur.

Lokesh Suthar · Answer 2 · 2014-02-28T22:19:50.903

0

You are trying to change the parent's css on child hover. This is not possible through pure css. What I will suggest is that you can do the opposite. Change the child's background on parent's hover as well its own

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

edited Feb 28 '14 at 22:19

answered Feb 28 '14 at 22:14

Lokesh Suthar

3,201
1
16
28

I would like to change #featured ul.ui-tabs-nav when hovering over #nav-fragment-1

2 Answers2