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();
})