如何使用元素下的元素悬停目标？

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

我该如何定位这些项目？

（Sorry for my english ..）

Regards，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

“>

而且我的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;}

希望它能帮助，问候

来源

2011-04-21 Seb69beS

请详细说明你的问题......元素是什么......它是哪个标签？ – Dharmesh 2011-04-21 14:15:15

你。不必把伪类放在样式定义的末尾，你可以使用CSS

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

}

来源

2011-04-21 14:30:47

如何使用元素下的元素悬停目标？

回答

相关问题