Question

I have a carousel, and each of the elements should be circled by another image on hover. The problem is, I have to put a hover on each item of the carousel.

How can I target these items?

My HTML and Js :

<script type="text/javascript">
            jQuery.noConflict();
            jQuery(document).ready(function() {
                jQuery('#mycarousel').jcarousel({scroll : 1,animation : 'fast'});

                jQuery("#container_vignette_1").mouseover(function() {jQuery("#vignette_hover_1").show();}).mouseout(function(){jQuery("#vignette_hover_1").hide();});
                jQuery("#container_vignette_2").mouseover(function() {jQuery("#vignette_hover_2").show();}).mouseout(function(){jQuery("#vignette_hover_2").hide();});
                jQuery("#container_vignette_3").mouseover(function() {jQuery("#vignette_hover_3").show();}).mouseout(function(){jQuery("#vignette_hover_3").hide();});
                jQuery("#container_vignette_4").mouseover(function() {jQuery("#vignette_hover_4").show();}).mouseout(function(){jQuery("#vignette_hover_4").hide();});

                jQuery("ul#mycarousel li").hover(function(){

                })
            });
            </script>


            <ul id="mycarousel" class="jcarousel-skin-tango">
                <li><img src="images/image_1.png" width="202" height="128" alt="" id="image_1" /></li>
                <li><img src="images/image_2.png" width="202" height="128" alt=""/></li>
                <li><img src="images/image_3.png" width="202" height="128" alt=""/></li>
                <li><img src="images/image_4.png" width="202" height="128" alt=""/></li>
                <li><img src="images/image_5.png" width="202" height="128" alt=""/></li>
                <li><img src="images/image_6.png" width="202" height="128" alt=""/></li>
            </ul>

            <div id="container_vignette_1"><div id="vignette_hover_1" class="vignette_hover"><!-- --></div><!-- --></div>
            <div id="container_vignette_2"><div id="vignette_hover_2" class="vignette_hover"><!-- --></div><!-- --></div>
            <div id="container_vignette_3"><div id="vignette_hover_3" class="vignette_hover"><!-- --></div><!-- --></div>
            <div id="container_vignette_4

“>

And my css :

div#container_vignette_1 {margin-left:88px;margin-top:197px;position: absolute;left:0;top:0;float:left;width:214px;height:154px;background: url(../images/spacer.png) repeat;}
div#container_vignette_2 {margin-left:297px;margin-top:197px;position: absolute;left:0;top:0;float:left;width:214px;height:154px;background: url(../images/spacer.png) repeat;}
div#container_vignette_3 {margin-left:506px;margin-top:197px;position: absolute;left:0;top:0;float:left;width:214px;height:154px;background: url(../images/spacer.png) repeat;}
div#container_vignette_4 {margin-left:715px;margin-top:197px;position: absolute;left:0;top:0;float:left;width:214px;height:154px;background: url(../images/spacer.png) repeat;}

div.vignette_hover {position:absolute;left:0;top:0;flot:left;width:214px;height:154px;background: url(../images/background/vignette_hover.png) 0 0 no-repeat;display:none;}

Answer 1

you don’t have to put pseudo classes at the end of a style definition, you could use CSS

div.someDiv:hover div.someContainedDiv{
/*this will target div.someContainedDiv when div.somediv is in a hover state*/

}