在hover时使用XML内容更新DIV
我正在尝试做的概念相当简单。 我有一个通过XSLT从XML文档加载的公司徽标网格，每个徽标都有自己唯一的公司配置文件链接。
我在页面上有一个单独的div，本质上是一个“预览”框。 我想要做的是：
我滚动一个徽标，它将公司名称和简短描述加载到预览div中。 此内容通过XML加载。
我一直在搞乱Jquery load（）函数，将目标文档更改为在Hover上加载 – 它几乎得到了我想要的东西，但它将整个目标XML文档加载到div中。
如何将此目标XML数据分成单独的div？ （我的风格不同）我假设我会以某种方式使用Ajax。 我想将节点加载到name_div中，将节点加载到description_div中，并在hover上更新它们。 在此先感谢您的帮助！
以下是我正在使用的代码的一些示例：
portfolio.xml文件（此文件是我的主页面，显示网格和预览div，示例使用3家公司）：
ABC Company Consumer products abcco.jpg abcco.xml DEF Company Communications firm defco.jpg defco.xml GHI Corporation Electronic products ghico.jpg ghico.xml
以下XSLT在页面上显示该代码：
![]()
这是“预览div”的HTML结构：
[Name to display here] [Description to display here]
所有3个公司徽标都加载到页面中，每个徽标都显示从中加载的链接图像。 期望的效果是hover，显示“预览名称”div中的内容，以及“preview-desc”div中的内容。
让我试着更具体一点。 这里有些例子：
portfolio.xml文件（此文件是我的主页面，显示网格和预览div，示例使用3家公司）：
ABC Company Consumer products abcco.jpg abcco.xml DEF Company Communications firm defco.jpg defco.xml GHI Corporation Electronic products ghico.jpg ghico.xml
以下XSLT在页面上显示该代码：
![]()
这是“预览div”的HTML结构：
[Name to display here] [Description to display here]
所有3个公司徽标都加载到页面中，每个徽标都显示从加载的链接图像。 所需效果是hover时，在“preview-name”div中显示的内容，在“preview-desc”div中显示的内容。
保留页面的语义和样式表的结构，我尝试做这样的事情：
然后，在CSS样式表中，您可以使用:hover pseudoclass和+ combinator来显示或隐藏预览。 有一些问题与crossbrowser兼容性。 您应该检查Stu Nicholls站点以获得更好的语义和CSS示例。
严格来说， load()可以在url之后选择一个选择器，只返回ajax调用的一部分。
所以，像：
$('#name_div').load('/path/yourXmlFile.xml name:first');
现在，每次想要查看某些内容时进行网络调用都不是很有效。 您可能希望将输出缓存到变量中。
我会将名称和desc作为锚点或其子图像的一部分提供给锚点，可能使用ALT标记作为名称，使用REL标记作为描述。
在将鼠标hover在任何锚点上时，我将使用jQuery [.attr（）]来获取包含所需名称和描述的属性值，并将其吐入各自的目标DIV中。
（有关类似示例，请参阅http://www.masterchef.com.au/home.htm中的 “配方类别”）