如何操縱在運行時

Question

的CSS我還有3個單選按鈕1），2）右3）無

所以當我懸停在單選按鈕我顯示下面3個的div，各有不同的CSS。

#popupdiv img { 
    float: right; 
    clear: right; 
    margin: 15px 
} 

#popupdiv img { 
    float: left; 
    clear: left; 
    margin: 15px 
} 

#popupdiv img { 
    float: random; //i want the image to be display randomly in the div 
    clear: random; 
    margin: 15px 
} 

<div id='popupdiv'> 
    <img src='http://www.hostname.com/images/a.jpg' width='100' height='100' border='0' /> 
    <img src='http://www.hostname.com/features/b.jpg' width='100' height='100' border='0'/> 
    <p>same text for all three divs..... 
</div> 

我想要做的是有一個div，並根據用戶懸停在哪個單選按鈕來更改css。我該怎麼做呢？

Answer 1

對於你在這個崗位（jQuery的），我想你正在使用該庫使用標籤，用jQuery是很容易的，我覺得你可以做到這一點是這樣的：

$('#radio1').mouseover(function(){ 
    $(this).removeClass('classname1 classname2'); 
    $(this).addClass('classname'); 
}); 

Answer 2

你會做的是對每種風格都有不同的類。 IE：

#popupdiv.left {...} 
#popupdiv.right {...} 
#popupdiv.random {...} 

然後當你將鼠標懸停在單選按鈕只是改變你的div類（）屬性來匹配你想要哪一個

樣本HTML：

<form id="formid"> 
<input type="radio" value="left" name="pos_button" id="left_button"> 
<input type="radio" value="right" name="pos_button" id="right_button"> 
<input type="radio" value="random" name="pos_button" id="random_button"> 
</form> 

JavaScript示例

$('#formid radio').mouseover(function(e){ 
    document.getElementById('popupdiv').className = $(this).val(); 
}); 

我使用DOM節點的「className」屬性的原因是b由於默認jQuery提供了removeClass和addClass方法。但是，我們不知道之前懸停的單選按鈕，實際上，除非需要，否則沒有必要跟蹤它。