Question

更新

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

我有三个div和三个radiobuttons rb1，rb2，rb3和divs 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');     
});

Answer 1

怎么样：

<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; }

Answer 2

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

Answer 3

您可以做一些事情，但这是一个没有考虑任何模式的解决方案。

<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定义一个类来决定要显示的类。

在盘旋时切换div？

3 个答案: