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

Question

该设计需要一个包含不同角色缩略图的图像库，当您将鼠标悬停在缩略图上时，会出现更大版本的图像，并且在左侧的 div 中也会出现每个角色的标题和描述。

1）有没有办法让两个div都通过翻转来控制？ （放大的图像和描述）

和

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

感谢您的阅读:)

Answer 1

首先尝试这个，不确定您使用的是什么cms等，所以nfi如何回答该部分：

HTML：

<a class="info" href="" onclick="return false;">
  <img src="thumb.jpg"/>
  <span><img src="large.jpg" /><br />
   description goes here</span>
</a>

CSS：

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

Answer 2

是的，将有关角色的信息存储在触发元素的 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"
}

好吧..只是一个例子...

Answer 3

使用 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 设置为返回值。