xSPiRiTx

Всплывающее изображение при наведении

Recommended Posts

Есть HTML список. Хочу сделать так, чтобы при наведении на пункт всплывало соответствующее изображение заданных размеров. Из обязательных условий - чтобы изображение перемещалось вместе с курсором мыши.
Гуглил, но все что удалось нагуглить - это изображение, которое появляется в определенном месте, а не "бегает" приклеенным к курсору.
Может кто-нибудь сталкивался, дайте ссылку на реализацию подобной фичи.

Share this post


Link to post
Share on other sites

Благодарю! То, что нужно, но..... 

Очень жаль, что у меня картинка уплыла куда-то в дальние края. А связано это с особенностями моего списка:

<ul class="list2b">
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>  
</ul>
.list2b {
    margin-bottom: 8px;
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list2b li {
    position: relative;
    border: 2px solid #DDDDDD;
    background: #FAFAFA;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 40px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list2b li:hover {
    background: #F0F5FB;
    border: 2px solid #ADCEE9;
}
.list2b li:before {
    line-height: 32px;
    position: absolute;
    top: 4px;
    left:-40px;
    width:40px;
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    background: #77AEDB;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.list2b li:hover:before {
    width:46px;
    background: #337AB7;
}
.list2b li:after {
    position: absolute;
    left: 0;
    top: 4px;
    content: "";
    height: 0;
    width: 0;
    border: 16px solid transparent;
    border-left-color: #77AEDB;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s
}
.list2b li:hover:after {
    margin-left: 6px;
    border-left-color: #337AB7;
}

 

 

Пробовал margin свойствами у .hover_img img в пикселях задать позиционирование к курсору, но на разных дисплеях картинка в разные места уплывает.

Edited by xSPiRiTx

Share this post


Link to post
Share on other sites

Вооооо!!! Благодарю еще раз! Теперь всё отлично! Лови плюс.

Блин. Если самый последний пункт в списке внизу страницы, то картинка под курсором становится не видна, прячется за границы экрана :sad:

Edited by xSPiRiTx

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,330
    Total Members
    3,128
    Most Online
    TimofejUS
    Newest Member
    TimofejUS
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.