更新DIV与悬停XML内容 [英] Updating DIV with XML content on hover

问题描述

什么我想要做的概念相当简单。我有公司标志的通过XSLT从XML文档加载的网格，每个都有自己的独特联系的公司的介绍。

The concept of what I'm trying to do is fairly simple. I have a grid of company logos loaded through XSLT from an XML document, each with their own unique links to the company profiles.

我在页面上一个单独的分区，基本上是一个preVIEW框。我想要做的是这样的：

I have a separate div on the page, essentially a "preview" box. What I want to do is this:

我摇了一个标志，它加载了公司的名称和简短描述到preVIEW股利。此内容是通过XML加载。

I roll over a logo, and it loads the name of the company and a short description into the preview div. This content is loaded through XML.

我一直插科打诨与jQuery的load（）函数，改变目标文件加载悬停＆mdash;并且它几乎得到了我想要的，但它加载整个目标XML文档进的div

I have been messing around with the Jquery load() function, changing the target document to load on Hover—and it almost gets what I want, but it loads the whole target XML document into the div.

我怎么能分开这一目标XML数据转换成单独的div？ （这是我的风格不同） 我想我会利用Ajax技术在某些方面。我要加载的＆LT;名称＆gt; 节点进入name_div，而＆LT;说明＆GT; 节点进入description_div ，并让它们在悬停更新。在此先感谢您的帮助！

How can I separate this target XML data into separate divs? (which I have styled differently) I'd assume I would make use of Ajax in some way. I want to load the <name> node into the name_div, and the <desc> node into the description_div, and have them update on hover. Thanks in advance for the help!

下面是在code我正在与一些例子：

Here are some examples of the code I'm working with:

portfolio.xml文件（该文件是我的主要页面，显示网格和preVIEW格，例如使用了3家公司）：

portfolio.xml file (this file is my main page, displaying the grid and preview div, example uses 3 companies):

<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显示了$页面上的C $ C：

The following XSLT displays that code on the page:

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

这是preVIEW格的HTML结构：

This is the HTML structure of the "preview div":

<div id="preview">

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

</div>

这3家公司商标被加载到页面中，每个显示从加载链接的图像。预期的效果就是悬停，在preVIEW名分区，并在preVIEW降序排序分区中的内容显示的内容。

All 3 company logos are loaded into the page, each displaying a linked image loaded from . Desired effect is to on hover, display the contents of in the "preview-name" div, and the contents of in the "preview-desc" div.

让我试试更具体一点。下面是一些例子：

Let me try to be a bit more specific. Here are some examples:

portfolio.xml文件（该文件是我的主要页面，显示网格和preVIEW格，例如使用了3家公司）：

portfolio.xml file (this file is my main page, displaying the grid and preview div, example uses 3 companies):

<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显示了$页面上的C $ C：

The following XSLT displays that code on the page:

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

这是preVIEW格的HTML结构：

This is the HTML structure of the "preview div":

<div id="preview">

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

</div>

这3家公司商标被加载到页面中，每个显示从＆LT加载链接的图像;标志拇指＆GT; 。预期的效果就是悬停，显示的内容＆LT;名称＆gt; 中的preVIEW名分区，而内容＆LT; SDESC＆GT; 中的preVIEW降序排序DIV

All 3 company logos are loaded into the page, each displaying a linked image loaded from <logo-thumb>. Desired effect is to on hover, display the contents of <name> in the "preview-name" div, and the contents of <sdesc> in the "preview-desc" div.

推荐答案

preserving页面的语义和样式表的结构，我尝试做这样的事情：

Preserving the semantics of your page and the structure of your stylesheet, I try to do something like this:

<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样式表，你可以使用：悬停伪类和 + 组合子来显示或隐藏preVIEW。有ARA一些问题crossbrowser兼容性。您应该检查斯图尼科尔斯网站更好的语义和CSS的例子。

Then, in CSS stylesheet, you can use :hover pseudoclass and + combinator to show or hide preview. There ara some problems with crossbrowser compatibility. You should check Stu Nicholls site for better semantics and CSS examples.

这篇关于更新DIV与悬停XML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！