jQuery met CSS

[RonaldGJ]

Beste mensen!

Ik heb al eens vaker gezocht naar een goede oplossing voor dit probleem.
Ik heb een div element met daarin een kleiner div element. Het is de bedoeling dat het binnenste div element standaard verborgen is. Op het moment dat je over de 'outer'-div gaat, moet de 'inner'-div zichtbaar worden. Op het moment dat je over de 'inner'-div gaat, moet overigens wel de 'inner-div' zichtbaar blijven. Ik heb ook nog een anchor element er in staan, maar als je daar snel overheen gaat, wordt de 'inner'-div niet zichtbaar. Waarschijnlijk omdat de anchor tag niet officieel bij de 'outer'-div element hoort.

Ik hoop dat dit een beetje duidelijk is en dat iemand mij hiermee kan helpen. Ben al lang op zoek naar een goede oplossing hiervoor! Misschien dat er een lege div overheen gegooid moet worden o.i.d.

Alvast bedankt.

Gr. Ronald!

 

[stefanz]

Zo iets?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<div class="outer" onmouseover="$('.inner').show();" >outer div text<div class="inner">inner div text</div></div>
<script>$('.inner').hide();</script>

 

[RonaldGJ]

Ja ongeveer.

Voorbeeld:

<div class="outer">
  <img src='image.png' alt='' title='' />
  <a href='#' class='link'>
  <div class='inner'>
    Informatie
  </div>
</div>

Het meeste is met CSS gepositioneerd! Maar soms als je over de 'a'-tag gaat, blijft de 'inner' gewoon staan. Bij verdwijnt niet. Soms als je snel op de 'a'-tag gaat staan vanaf buiten, dan komt hij soms niet eens in beeld.

 

[stefanz]

Het zou wel handig zijn als je de gehele code even plaatst met javascript

 

[CaptainBri]

Hoi Ronald,

Dit kan prima zonder javascript. Voorbeeldje:

<style type="text/css">
#a{
	background-color:#C30;
	width:200px;
	height:200px;
	padding:15px;
}

#a #b{
	background-color:#990;
	width:100%;
	height:100%;
	display:none;
}

#a:hover #b{
	display:block;
}
</style>

<div id="a">
	<div id="b"></div>
</div>

Resultaat:

Dit werkt overigens prima met een anchor in de innerdiv (in dit geval #b)