悬停时使用 XML 内容更新 DIV

我想做的事情的概念相当简单。我有一个通过 XSLT 从 XML 文档加载的公司徽标网格，每个徽标都有自己独特的公司简介链接。

我在页面上有一个单独的 div，本质上是一个“预览”框。我想做的是这样的：

我将鼠标悬停在徽标上，它会将公司名称和简短描述加载到预览 div 中。该内容通过 XML 加载。

我一直在摆弄 Jquery load() 函数，将目标文档更改为在 Hover 上加载，它几乎得到了我想要的结果，但它将整个目标 XML 文档加载到 div 中。

如何将此目标 XML 数据分离到单独的 div 中？ （我的风格不同） 我假设我会以某种方式使用 Ajax。我想加载<name>节点到 name_div 中，并且<desc>节点到description_div，并让它们在悬停时更新。先谢谢您的帮助！

以下是我正在使用的代码的一些示例：

portfolio.xml文件（这个文件是我的主页，显示网格和预览div，示例使用3家公司）：

<portfolio>
    <company>
        <name>ABC Company</name>
        <sdesc>Consumer products</sdesc>
        <logo-thumb>abcco.jpg</logo-thumb>
        <link>abcco.xml</link>
    </company>

    <company>
        <name>DEF Company</name>
        <sdesc>Communications firm</sdesc>
        <logo-thumb>defco.jpg</logo-thumb>
        <link>defco.xml</link>
    </company>
    <company>
        <name>GHI Corporation</name>
        <sdesc>Electronic products</sdesc>
        <logo-thumb>ghico.jpg</logo-thumb>
        <link>ghico.xml</link>
    </company>
</portfolio>

以下 XSLT 在页面上显示该代码：

<xsl:for-each select="portfolio/company">
     <xsl:sort select="name" />

       <div class="invest-port-thumb">
         <a>
         <xsl:attribute name="href">
              <xsl:value-of select="link" />
         </xsl:attribute>

         <img>
         <xsl:attribute name="src">
              <xsl:value-of select="logo-thumb" />
         </xsl:attribute>
         </img>
         </a>
       </div>

</xsl:for-each>

这是“预览 div”的 HTML 结构：

<div id="preview">

<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to display here] </div>

</div>

所有 3 个公司徽标均加载到页面中，每个徽标都显示从 加载的链接图像。所需的效果是在悬停时显示“preview-name”div 中的内容以及“preview-desc”div 中的内容。

让我尝试说得更具体一些。这里有些例子：

portfolio.xml文件（这个文件是我的主页，显示网格和预览div，示例使用3家公司）：

<portfolio>
    <company>
        <name>ABC Company</name>
        <sdesc>Consumer products</sdesc>
        <logo-thumb>abcco.jpg</logo-thumb>
        <link>abcco.xml</link>
    </company>

    <company>
        <name>DEF Company</name>
        <sdesc>Communications firm</sdesc>
        <logo-thumb>defco.jpg</logo-thumb>
        <link>defco.xml</link>
    </company>
    <company>
        <name>GHI Corporation</name>
        <sdesc>Electronic products</sdesc>
        <logo-thumb>ghico.jpg</logo-thumb>
        <link>ghico.xml</link>
    </company>
</portfolio>

以下 XSLT 在页面上显示该代码：

<xsl:for-each select="portfolio/company">
     <xsl:sort select="name" />

       <div class="invest-port-thumb">
         <a>
         <xsl:attribute name="href">
              <xsl:value-of select="link" />
         </xsl:attribute>

         <img>
         <xsl:attribute name="src">
              <xsl:value-of select="logo-thumb" />
         </xsl:attribute>
         </img>
         </a>
       </div>

</xsl:for-each>

这是“预览 div”的 HTML 结构：

<div id="preview">

<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to display here] </div>

</div>

所有 3 个公司徽标均加载到页面中，每个徽标都显示从加载的链接图像<logo-thumb>。期望的效果是悬停时显示内容<name>在“预览名称”div 中，以及内容<sdesc>在“预览描述”分区中。

保留页面的语义和样式表的结构，我尝试执行以下操作：

<xsl:for-each select="portfolio/company"> 
     <xsl:sort select="name" /> 
     <div class="invest-port-thumb"> 
       <a href="{link}"><img src="{logo-thumb}" /></a>
       <div class="preview"> 
         <div class="preview-name"><xsl:value-of select="name" /></div> 
         <div class="preview-desc"><xsl:value-of select="sdesc" /></div> 
       </div> 
     </div> 
</xsl:for-each>

然后，在 CSS 样式表中，您可以使用:hover伪类和+用于显示或隐藏预览的组合器。跨浏览器兼容性存在一些问题。你应该检查一下斯图·尼科尔斯网站 http://www.cssplay.co.uk/以获得更好的语义和 CSS 示例。