Question

我有3个单选按钮1）左，2）右3）无

所以当我将鼠标悬停在单选按钮上时，我会显示以下3个div，每个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

您要做的是为每种样式设置不同的类。 IE：

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

然后当您将鼠标悬停在单选按钮上时，只需更改div上的class（）属性即可匹配您想要的任何一个

示例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”属性的原因是因为默认情况下jQuery提供了removeClass和addClass方法。但是，我们不知道以前徘徊在哪个单选按钮上，除非你需要，否则没有必要跟踪它。

Answer 2

对于你在这篇文章中使用的标签（jquery）我想你正在使用那个库，jquery很容易，我想你可以用这样的东西做到这一点：

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

如何在运行时操作CSS

2 个答案: