jquery - img - Hover LI para mostrar div

jquery class hover

Question

Hice una pregunta similar aquí, y aunque obtuve algunas respuestas, no logré que funcionara. En resumen, tengo una lista UL como esta:

<ul class="productlist">
<li><a href="#" id="link0" class="product-link">Caviar</a></li>
<li><a href="#" id="link1" class="product-link">Athena</a></li>
<li><a href="#" id="link2" class="product-link">Knot</a></li>
<li><a href="#" id="link3" class="product-link">Brooke Leaf</a></li>
</ul>

A continuación, tengo 4 DIV. Todos ellos, excepto el primero, deben estar ocultos, y solo deben abrirse cuando el usuario pase el mouse sobre su enlace LI arriba. Entonces, en pocas palabras. El usuario llega a la página, se abre el primer enlace. Pasa el cursor sobre el segundo y aparece el segundo, lo mismo con el tercero, el cuarto ...

<div id="boxlink0">Some text for the first link</div>
<div id="boxlink1">Some text for the second link</div>
<div id="boxlink2">Some text for the third link</div>
<div id="boxlink3">Some text for the fourth link</div>

Answer 1

Algo así debería hacer el trabajo. Por lo general, respondo para ver qué has intentado primero, pero esto fue bastante fácil.

$(document).ready(function(){
$(".productList li").hover(function(){
$("#box"+$(this).attr("id")).show();
},function(){
$("#box"+$(this).attr("id")).hide();
});
$("#boxlink0").show();
$("#boxlink1, #boxlink2, #boxlink3").hide();
});

Answer 2

Envuelva todos los divs en un div envoltorio y aplique CSS inicialmente para hacer visible solo el primer div

<div id="wrapper">
<div id="boxlink0">Some text for the first link</div>
<div id="boxlink1">Some text for the second link</div>
<div id="boxlink2">Some text for the third link</div>
<div id="boxlink3">Some text for the fourth link</div>
<div>

CSS

#wrapper div
{
display:none;
}
#wrapper div:first-child
{
display:block;
}

A continuación, compruebe qué li ha estado activo utilizando la propiedad index () y luego muestre el div correspondiente utilizando jquery.

$(''ul li a'').hover(function(e){
var liNumber=$(this).parent(''li'').index();
$(''#wrapper div'').css(''display'',''none'');
$(''#wrapper div:nth-child(''+(liNumber+1)+'')'').show();
})

JSFiddle: http://jsfiddle.net/huF8Z/

Answer 3

No puede usar el hover para afectar a elementos que no son descendientes o hermanos del elemento fijo.

Pero puedes cambiar tu html a

<dl class="productlist">
<dt><a href="#" id="link0" class="product-link">Caviar</a></dt>
<dd id="boxlink0">Some text for the first link</dd>
<dt><a href="#" id="link1" class="product-link">Athena</a></dt>
<dd id="boxlink1">Some text for the second link</dd>
<dt><a href="#" id="link2" class="product-link">Knot</a></dt>
<dd id="boxlink2">Some text for the third link</dd>
<dt><a href="#" id="link3" class="product-link">Brooke Leaf</a></dt>
<dd id="boxlink3">Some text for the fourth link</dd>
</dl>

y use

.productlist dd {
display: none;
}
.productlist > dt:hover + dd {
display: block;
}

Manifestación

Y si desea que las descripciones aparezcan debajo de todas las definiciones, puede usar position: absolute para ubicarlas en la parte inferior: Demo

Answer 4

Prueba este simple script:

var $boxes = $(''.boxlink'');
$(''.productlist .product-link'').mouseover(function() {
$boxes.hide().filter(''#box'' + this.id).show();
});

boxlink clase boxlink a todos los divs para mayor comodidad. También necesita un pequeño CSS para mostrar el primer div por defecto:

.boxlink {
display: none;
}
#boxlink0 {
display: block;
}

Demostración: http://jsfiddle.net/Vg4SH/

Answer 5

Ver trabajando Fiddle Here

Primero, aplique css display none a los últimos 3 divs:

#boxlink1, #boxlink2, #boxlink3 {
display:none
}

luego escribe este código js:

$(''#link0'').hover(function(){
$(''#boxlink0'').css(''display'',''block'');
$(''#boxlink1, #boxlink2, #boxlink3'').css(''display'',''none'');
});
$(''#link1'').hover(function(){
$(''#boxlink1'').css(''display'',''block'');
$(''#boxlink0, #boxlink2, #boxlink3'').css(''display'',''none'');
});
$(''#link2'').hover(function(){
$(''#boxlink2'').css(''display'',''block'');
$(''#boxlink0, #boxlink1, #boxlink3'').css(''display'',''none'');
});
$(''#link3'').hover(function(){
$(''#boxlink3'').css(''display'',''block'');
$(''#boxlink0, #boxlink1, #boxlink2'').css(''display'',''none'');
});

Answer 6

$(".productlist li a").hover(function(e){
e.stopPropogation(); // to stop bubbling
$("#box" +$(this).attr(id)).show();
})