所以我想要得到的是当你悬停单词 span 时,会出现一个图像。但是,当我悬停时,什么也没有发生。我已经尝试了所有技术来做到这一点,但没有成功。
HTML:
<div href="javascript:void();" onClick="document.getElementById('avThemes').style.display='block';">
<input type="radio" name="theme" value="available" id="available" onclick="" /> Available Themes
</div><br />
<div id="avThemes">
<span id="container1"><input type="radio" name="theme" value="greenWaves" id="greenWaves" />
<a id="gw">Green Waves</a>
</span>
<span id="container2"><input type="radio" name="theme" value="purpleLove" id="purpleLove" />Purple Love</span>
</div>
<br />
<img src="images/themes/greenWaves/preview.gif" id="preview1" class="preview" />
<img src="images/themes/purpleLove/preview.gif" id="preview2" class="preview" />
CSS:
#avThemes {
display: none;
}
#preview1, #preview2 {
display: none;
position: absolute;
top: 500px;
left: 20px;
}
#container1:hover #preview1{
display: block;
}
我也尝试过使用它也失败了。有人可以帮我解决这个问题吗?谢谢!
$('#container1').mouseover(function() {
$('#preview1').fadeIn("slow");
});
$('#container1').mouseleave(function() {
$('#preview1').fadeOut("slow");
});