Блог

У меня есть карусель, и каждый из элементов должен быть обведен другим изображением при наведении курсора мыши. Проблема в том, что я должен навести курсор на каждый элемент карусели.

Как я могу настроить таргетинг на эти элементы?

Мой HTML и 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
  

«>

И мой 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;}
  

вам не обязательно помещать псевдоклассы в конец определения стиля, вы могли бы использовать CSS

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

}