Hover image - part of forms appears untill hover another How?

Posted by Mac on Stack Overflow See other posts from Stack Overflow or by Mac
Published on 2013-11-07T09:25:13Z Indexed on 2013/11/07 9:54 UTC
Read the original article Hit count: 178

Filed under:
|
|
|

Im trying to make part of my form/questionnaire appears when hover on image and stay active untill hover another image next to it. and repeat it on 7 images. Of course I need the cheched checkboxes to stay after they'll be hidden so you can come back to them by hover the image and for ex. correct answers and so on..

I was using a j code:

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

it works to another elements on my page but not to the form.

how can i do it maybe with css class or another j code. Thanks!

Parts of html: (let's say I want to hover on "Oobj56" and make "Oobj58" appears and stay as I said before...)

<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="imie">

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

<select name="miasto">
<option selected="Miasto">Miasto</option>
<option>Wroclaw</option>
    <option>Warszawa</option>
<option>Kraków</option>
<option>Trójmiasto</option>
<option>Poznan</option>
    <option>Szczecin</option>
<option>Torun</option>
<option>Lódz</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">Plec</option>
<option>Mezczyzna</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" />silownia<br />
<input type="checkbox" name="sport" value="fitness" />fitness<br />
<input type="checkbox" name="sport" value="noga" />pilka nozna<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 amerykanski<br />
<input type="checkbox" name="sport" value="konie" />jezdziectwo 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="Wyslij" class="wyslij" />
</div></form>


</div>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css