Jquery 有没有办法编程一个鼠标悬停图像，控制2个div[较大的图像和文本描述]

该设计需要一个图像库，其中包含不同字符的缩略图，当您滚动缩略图时，会显示更大版本的图像，并在左侧的div中显示每个字符的标题和说明

1） 是否有一种方法可以在两个div中都使用翻滚控制？（放大图像和说明）

及

2） 我需要如何将其与cms同步

---

感谢阅读：）

是的，将有关字符的信息存储在触发器元素的id标记中。比如说它是米老鼠，id=“mickey”也许你正在使用原型

$$('.trigger').each(function (el) {el.observe('mouseover',showInfo.bind(el);});

然后函数showInfo显示具有较大图像和信息的div

function showInfo(ev) {
    // this refers to the element that has the mouse over, which has the descriptive id
    var infoContainerId = this.id+"_info";
    var imageContainerId = this.id+"_image";
    $(infoContainerId).show(); // showing the div id="mickey_info"
    $(imageContainerId).show(); // showing the div id="mickey_image"
}

---

嗯。。仅举一个例子…

首先尝试一下，不确定您使用的是什么cms等，因此nfi如何回答该部分：

HTML:

---

使用jQuery，这是未经测试的，但可能是这样的：

$('#myImageThumbnail').mouseenter(function(){

    //Set the description text
    $('#descriptionDiv').html('Insert character description here');

    //Enlarge the image
    $('#myImageThumbnail').attr('height','300');
    $('#myImageThumbnail').attr('width','200');
});

$('#myImageThumbnail').mouseleave(function(){

    //Remove the description text
    $('#descriptionDiv').html('');

    //Return image/thumbnail to original size
    $('#myImageThumbnail').attr('height','150');
    $('#myImageThumbnail').attr('width','100');
});

---

如果您需要从数据库中获取描述的动态信息，只需查看jQuery$.ajax函数，并将描述HTML设置为返回值。

感谢您的帮助！很有见地。对于CMS的im，我有点愿意接受建议。如果可能的话，我比较喜欢wordpress，但这只是因为我以前用过它。再次感谢！你得到答案了吗？请检查合适的一个，如果你愿意，请投票：）他们都以自己的方式提供帮助。我认为pstanton的方式将是我构建的方式。对我来说最有意义，但我可能错了。谢谢大家的帮助！

a.info              {z-index:24; position:relative; color:#999; font-size:11px; text-transform:none; font-weight:normal; text-decoration:none; border:1px solid #999; padding-left:3px; padding-right:3px; margin:5px;}
a.info:hover        {z-index:25; text-decoration:none; color:#333; border-color:#333;}
a.info span         {display:none; position:absolute; top:15px; left:15px; width:240px; color:#000; font-size:12px; background-color:#fff; padding:2px; border:1px solid #333;}
a.info:hover span   {display:block;}

$('#myImageThumbnail').mouseenter(function(){

    //Set the description text
    $('#descriptionDiv').html('Insert character description here');

    //Enlarge the image
    $('#myImageThumbnail').attr('height','300');
    $('#myImageThumbnail').attr('width','200');
});

$('#myImageThumbnail').mouseleave(function(){

    //Remove the description text
    $('#descriptionDiv').html('');

    //Return image/thumbnail to original size
    $('#myImageThumbnail').attr('height','150');
    $('#myImageThumbnail').attr('width','100');
});