Выпадающие описания к картинкам

&lt;style&gt;
            .hiden_content{
                display: none;   

                position: absolute;
                width: 423px;
                padding: 25px 30px;
                background-color: #fff;
                border: 1px solid #e0d15a;
                border-radius: 24px;
                margin-top: 10px;
                z-index: 1000;   
            }

            .visual-content .g_image img{

                border-radius: 50%;
                border:1px solid rgba(0, 0, 0, 0.1);

                z-index: auto;

            }

            .sps-post-alt , .sps-post-alt:first-child,.sps-post-alt:last-child{
                position: relative;
                z-index: auto;
                width: 82px;
                height: 82px;
                float: left;
                margin: 10px  15px;


            }

            .g_container:after{
                content:"";
                width: 0;
                height: 0;
                display: block;
                clear: both;
            }

            .sps-post-alt .name{
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
            }
        &lt;/style&gt;

        &lt;div class="g_container"&gt;



            &lt;div class=" sps-post-alt"&gt;

                &lt;div class="g_image"&gt;
                    &lt;a href="" title="Заголовок"&gt;
                        &lt;img width="82" height="82" src="" alt="alt"&gt;                                        
                    &lt;/a&gt;    
                &lt;/div&gt;

                &lt;div class="hiden_content"&gt;
                    &lt;div class="name title-h3"&gt; Заголовок &lt;/div&gt;

                    &lt;div class="text"&gt;
                        &lt;p&gt;Описание&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;


            &lt;/div&gt;





            &lt;div class=" sps-post-alt"&gt;

                &lt;div class="g_image"&gt;
                    &lt;a href="" title="Заголовок"&gt;
                        &lt;img width="82" height="82" src="" alt="alt"&gt;                                        
                    &lt;/a&gt;    
                &lt;/div&gt;

                &lt;div class="hiden_content"&gt;
                    &lt;div class="name title-h3"&gt; Заголовок &lt;/div&gt;

                    &lt;div class="text"&gt;
                        &lt;p&gt;Описание&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;


            &lt;/div&gt;

        &lt;/div&gt;

<style>

.hiden_content{

display: none;

position: absolute;

width: 423px;

padding: 25px 30px;

background-color: #fff;

border: 1px solid #e0d15a;

border-radius: 24px;

margin-top: 10px;

z-index: 1000;

}

.visual-content .g_image img{

border-radius: 50%;

border:1px solid rgba(0, 0, 0, 0.1);

z-index: auto;

}

.sps-post-alt , .sps-post-alt:first-child,.sps-post-alt:last-child{

position: relative;

z-index: auto;

width: 82px;

height: 82px;

float: left;

margin: 10px 15px;

}

.g_container:after{

content:"";

width: 0;

height: 0;

display: block;

clear: both;

}

.sps-post-alt .name{

font-weight: 600;

font-size: 18px;

margin-bottom: 10px;

}

</style>

</a>

</div>

<div class="name title-h3"> Заголовок </div>

<p>Описание</p>

</div>

</a>

</div>

<div class="name title-h3"> Заголовок </div>

<p>Описание</p>

</div>

   $('.g_image').mouseover(function () {
        var elem = $(this).next(".hiden_content");;
//        if (elem.find('.text p').text()) {
          
            
            var $container = $('.g_container');
            
            var dif = elem.offset().left - $container.offset().left;
            var dif2 =$container.width() - elem.width();
            
            var elPosTop =  elem.offset().top;
            
            //console.info(elPosTop);
            
            if ((dif + 62) &gt; dif2) {
                elem.offset({
                    left: elem.offset().left - (dif - dif2) - 62
                });
            }

        
         elem.show();

    });

    $('.g_image').mouseleave(function () {
        $(this).next(".hiden_content").hide();
    });

$('.g_image').mouseover(function () {

var elem = $(this).next(".hiden_content");;

// if (elem.find('.text p').text()) {

var $container = $('.g_container');

var dif = elem.offset().left - $container.offset().left;

var dif2 =$container.width() - elem.width();

var elPosTop = elem.offset().top;

//console.info(elPosTop);

if ((dif + 62) > dif2) {

elem.offset({

left: elem.offset().left - (dif - dif2) - 62

});

}

elem.show();

});

$('.g_image').mouseleave(function () {

$(this).next(".hiden_content").hide();

});

andxbes

Выпадающие описания к картинкам

Leave a Reply Cancel reply