javascript - 我的单选按钮不会响应悬停

Question

所以我想要得到的是，当您将鼠标悬停在 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");
      });

Answer 1

试试这个.....

HTML

<input type="radio" name="theme" value="available" id="available" onclick="" /> 
 Available 
 Themes<br />
 <div id="avThemes">
<span id="container1"><input type="radio" name="subtheme" value="greenWaves"
id="greenWaves" /><a id="gw">Green Waves</a></span>
 </div>
<img src="images/themes/greenWaves/preview.gif" id="preview1" class="preview" />

CSS

 #avThemes {
 display: none;
  }

#preview1, #preview2 {
display:none;
}

JavaScript

  $('#available').click(function() {
  $('#avThemes').show();
  });

 $('#container1').mouseover(function() {
//alert("fdf");
    $('#preview1').fadeIn("slow");
  });
  $('#container1').mouseleave(function() {
    $('#preview1').fadeOut("slow");
  });

Here