徘徊時切換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？

回答

相關問題