-1

プロダクション キューブをクリックすると、ポップアップが開きます。

画像の下のポップアップには 4 つのリンクがあります。

しかし、リンクが 3 つしか表示されません。

4 番目のリンクの表示方法。

http://jsfiddle.net/Lx7kx/7/embedded/result/

<div class="cubeCellProduction" data-text="Production" data-caption="&lt;a style='padding-left: 30px; font-size: 14px; color: grey;' href='/' &gt;Work Orders&lt;/a&gt; &lt;div&gt; &lt;a style='padding-left: 40px; font-size: 14px; color: grey;' &gt;Projects&lt;/a&gt; &lt;/div&gt; 
                    &lt;div&gt;&lt;a style='padding-left: 42px; font-size: 14px; color: grey;' &gt; Work Flow &lt;/a&gt;&lt;/div&gt; 
                    &lt;a style='padding-left: 42px; font-size: 14px; color: grey;' &gt;Reports&lt;/a&gt;"
                    data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/production.png"></div>

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

                    $(this).hover(

                    function() {

                        $(".cubeTextStyleProduction").addClass("hovered").append("<span class='divStockProduction'>Production</span>");

                    },

                    function() {
                        $(this).find("span:last").remove();
                        $(".cubeTextStyleProduction").removeClass("hovered");

                    });
                });
            }, 600);

        });
4

3 に答える 3

0

2 番目と 3 番目のリンクは div 内にあるが、1 番目と 4 番目のリンクはそうではないという事実にも関係があるのではないかと思います。それがあなたのやりたかったことですか？

于 2013-03-22T22:11:54.790 に答える
0

.captionが最後の要素のmax-height表示を妨げています。

.caption { max-height: 90px !important; }

非表示のmax-height要素に対応するため、または (理想的には) 使用する必要がmin-heightありpadding、目的のレイアウトを実現するために、 をインクリメントする必要があります。

于 2013-03-22T22:07:38.953 に答える
0

.captionクラスは に設定されていheight: 90px !important;ます。and に変更するheight: auto;と、任意の数のリンクの問題が解決されます。

于 2013-03-22T22:45:59.997 に答える