悬停图像 - 部分表单出现，直到悬停另一个如何？

Question

我试图让我的表单/问卷的一部分在悬停在图像上时出现并保持活动状态，直到将另一个图像悬停在它旁边。并在 7 个图像上重复。 当然，我需要在隐藏后保留已选中的复选框，以便您可以通过悬停图像来返回它们，例如。正确答案等等..

我使用的是 j 代码：

<script type="text/javascript"> 
$("#Oobj51").hover(function(){
$('#Oobj58').show();
},function(){
$('#Oobj58').hide();
});
</script>

它适用于我页面上的其他元素，但不适用于表单。

我怎么能用 css 类或其他 j 代码来做到这一点。谢谢！

部分html：（假设我想将鼠标悬停在“Oobj56”上并使“Oobj58”出现并保持如我之前所说的那样......）

<div id="Oobj56">
<button type="submit" class="przed6" onmouseover="this.className='po6'" 

onmouseout="this.className='przed6'" />
</div>

<div id="Oobj57">
<button type="submit" class="przed7" onmouseover="this.className='po7'" 

onmouseout="this.className='przed7'" />
</div>

<div id="Oobj60">
<form action="mailto:" method="post" enctype="text/plain">

<div id="Oobj59">

<input type="text" input size="8" name="imie" placeholder="imię">

<input type="text" input size="11" name="numer" placeholder="numer telefonu">
<br><br>

<select name="miasto">
<option selected="Miasto">Miasto</option>
<option>Wrocław</option>
    <option>Warszawa</option>
<option>Kraków</option>
<option>Trójmiasto</option>
<option>Poznań</option>
    <option>Szczecin</option>
<option>Toruń</option>
<option>Łódź</option>
    <option>Bydgoszcz</option>
<option>Lublin</option>
<option>Katowice</option>
</select>

<select name="wiek">
<option selected="selected">Wiek</option>
<option> <15 </option>
<option>15-19</option>
<option>20-24</option>
<option>25-29</option>
    <option>30-34</option>
<option>35-39</option>
<option>40-44</option>
    <option>45-49</option>
<option>50-54</option>
<option>55-59</option>
    <option>60-64</option>
<option>65-69</option>
<option>70-74</option>
    <option> >75 </option>
</select>

<select name="plec">
<option selected="selected">Płeć</option>
<option>Mężczyzna</option>
<option>Kobieta</option>
</select></div>


<div id="Oobj58">

<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('sport');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>

<input type="checkbox" onClick="toggle(this)" /><br>

<input type="checkbox" name="sport" value="gym" />siłownia<br />
<input type="checkbox" name="sport" value="fitness" />fitness<br />
<input type="checkbox" name="sport" value="noga" />piłka nożna<br />
<input type="checkbox" name="sport" value="kosz" />koszykówka<br />
<input type="checkbox" name="sport" value="siata" />siatkówka<br />
<input type="checkbox" name="sport" value="ameryka" />football amerykański<br />
<input type="checkbox" name="sport" value="konie" />jeździectwo konne<br />
<input type="checkbox" name="sport" value="basen" />basen/sporty wodne<br />
<input type="checkbox" name="sport" value="zima" />sporty zimowe<br />

</div>




<div id="Oobj15">

<input type="submit" style="font-family: Open Sans;" value="Wyślij" class="wyslij" />
</div></form>


</div>

“Oobj57”的类是

.przed7{
background: url('image/praca.png') no-repeat;
width: 84px;
height: 84px;
border-style: none;
}

.po7{
background: url('image/praca_wybr.png') no-repeat;
width: 84px;
height: 84px;
border-style: none;
}

Answer 1

我不确定我是否理解了你的问题。

我想你可以在图片标签中使用 onmouseover 事件属性。