徘徊时切换div？

更新：徘徊时切换div？

#div1 img { float: left; clear: left; margin: 10px; }  
#div2 img { float: right; clear: right; margin: 10px; }

我有三个div的和三个单选按钮 RB1，RB2，RB3和div的DIV1，DIV2，DIV3

当过radiobutton1用户悬停然后显示DIV1 ... radiobutton2然后显示div2等...

下面的代码工作正常。

我的问题是：

我如何使用含有单<div>文本和图像（而不是一分式三份），并简单地套用一个CSS的样式，这取决于单选按钮悬停？

<div id="div1">  
<img class="align-left" src="image.gif" /> 
some test.....div1 
</div> 

<div id="div2">  
<img class="align-right" src="image.gif" /> 
some test.....div2 
</div>  

<div id="div3">  
<img class="align-left" src="image.gif" /> 
<img class="align-right" src="image1.gif" /> 
some test.....div3 
</div> 


$('#_rbl').hover(    
    function(){   
    $('#div1').dialog('open');  
}); 

$('#_rb2').hover(    
    function(){   
    $('#div2').dialog('open');  
}); 

$('#_rb3').hover(    
    function(){   
    $('#div3').dialog('open');  
});

来源

2011-05-17 Nick Kahn

如何：

<div id="theDiv">  
<img class="align-left" src="image.gif" /> 
some test.....div1 
</div> 

$('#_rbl').hover(    
    function(){   
    $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb1").dialog('open'); 
}); 

$('#_rb2').hover(    
    function(){   
    $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb2").dialog('open');  
}); 

$('#_rb3').hover(    
    function(){   
    $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb3").dialog('open');  
});

UPDATE（创建类，像这样）：

.rb1 img { float: left; clear: left; margin: 10px; }  
.rb2 img { float: right; clear: right; margin: 10px; }

来源

2011-05-17 21:10:19

从哪里来的rb1，rb2，rb3类？ – 2011-05-17 21:14:09

你说你想要一个div，但你想改变你的课程。 rb1，rb2，rb3，是您创建的类，表示这是无线电＃1，＃2和＃3。 – 2011-05-17 21:22:09

rb1/2/3不是一个class它的一个单选按钮id – 2011-05-17 21:25:20

使用一个DIV
更新您的悬停功能
1. 删除现有的类usign $('#divID').removeAttr("style")
2. 使用$('#divID').addClass("rb1/2/3")
3. 显示在div

来源

2011-05-17 21:16:52 Lobo

有一些事情可以做添加新的类，但在这里是不考虑任何模式的解决方案。

<div id="divMain"></div> 

$('input[type=radio]').hover(function() { 
    if ($(this).attr('id') == "_rb1") { 
     $('#divMain').html('<img class="align-left" src="image.gif" />some test.....div1').dialog('open'); ; 
    } else if ($(this).attr('id') == "_rb2") { 
     $('#divMain').html('<img class="align-right" src="image.gif" />some test.....div2').dialog('open'); ; 
    } else if ($(this).attr('id') == "_rb3") { 
     $('#divMain').html('<img class="align-right" src="image.gif" /><img class="align-right" src="image.gif" />some test.....div3').dialog('open'); 
    } 
});

如果有图案，请定义得更清楚。我们可以使用CSS为div定义一个类，以决定显示哪些类。

来源

2011-05-17 22:10:57 fanfavorite

徘徊时切换div？

回答

相关问题