Question

这是我的问题。

我有一个旋转木马，当悬停时，每个元素必须由另一个图像圈出。问题是，我必须在旋转木马的每个项目上再次悬停。

我如何定位这些物品？

（抱歉我的英文..）

问候，Seb。

编辑：

我的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

“＆GT;

我的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

您不必在样式定义的末尾放置伪类，您可以使用CSS

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

}

如何通过在元素下悬停元素来获得目标？

1 个答案: