hovering the text for full form

问题

when i mouse hover the text below the cube..... i need to display a small window with a text in it.... i got the text from js but not sure how to integrate with hover function.... can you tell me how to implement it.... providing my code below..... when I hover over CRM it should show Customer Relationship Management..... providing my code below... the hover functionality working fine when i hover over the text box.... but i don't know how to get for the text below the cube...... i have included onmouseover and onmouseout functions..... but i dont know how to achieve for the text below the cube

$('document').ready(function() {
    window.setTimeout(function() {
        $('.cubeCell').each(function () {
            var htmlText = $(this).attr('data-text');
            $(this).append('<div class="cubeTextStyle">' + htmlText + '</div>');
        });
    }, 600);
});

<script type="text/javascript">
                function showStock(ii) {
                    var sh = $(ii).parent().find($('.divStock'));
                    var sharrow = $(ii).parent().find($('.stockarrow'));
                    sh.show();
                    sharrow.show();

                }
                /**
                 * hide stock
                 */
                function hideStock(ii) {
                    var shs = $(ii).parent().find($('.divStock'));
                    var sharrows = $(ii).parent().find($('.stockarrow'));
                    shs.hide();
                    sharrows.hide();
                }
                </script>

HTML:

<div class="cubeCell" data-text="CRM" class="desktopContactImage cubeCell"
                      data-caption="&lt;a style='padding-left: 40px; font-size: 14px; color: grey;' href='/Inventory/Partnumber/?ps=list' &gt;Register&lt;/a&gt; &lt;div&gt; &lt;a style='padding-left: 40px; font-size: 14px; color: grey;' href='/Bom/Bom/?ps=list' &gt;Demo&lt;/a&gt; &lt;/div&gt; &lt;a style='padding-left: 40px; font-size: 14px; color: grey;' &gt;Reports&lt;/a&gt;"
                      data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/guest.png"></div>

回答1:

First please don't provide Fiddles like that..ever, separate the different languages into their relevant boxes and use the resources tabs to link to files. It maks things a lot clearer for us to help.

Second don't include code that's not relevant, for example the the google analytic script, yes it will take more time for you to format the fiddle to use as an example but you'll get a quicker response.

If you simply need to hover over CSM and have "Customer Relationship Management" appear underneath it then you can do something like the below.

$('.cubeTextStyle').hover(
   function(){
      $(this).append('<span>Customer Relationship Management</span>');
   },
   function(){
      $('.cubeTextStyle span').remove();
   }
);

I haven't used your fiddle because I won't sift through all of your code, but please see this new basic fiddle.

来源：https://stackoverflow.com/questions/15370619/hovering-the-text-for-full-form