Question

能够使工具提示中的内容可点击。怎么样？每当我将鼠标悬停在工具提示上时，它就会停留在

（http://i62.tinypic.com/16bhbit.jpg）

我的播放列表添加由

生成

.addtoplaylist-video:hover:after{
    background-color: #ffffff;
    background:rgba(30,120,160,0.8);
    border-color: rgba(30,120,160,0.8);
    border-right-color: #ffffff;
    border-radius: 5px;
    top: -32px;
    color: #ffffff;
    content: 'Add To My Playlist!';
     left: -100px;
    padding: 5px 5px;
    position: absolute;
    z-index: 98;
    width: 120px;
    height:15px;
    text-align:center;
        -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1e78a0', endColorstr='#1e78a0');
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    cursor:pointer;


}

html

    <div id="video1" class="toggle">
    <span class="addtoplaylist-video">
         <img src="images/addicon.png" width="12" height="11" alt="add" class="addplaylisticonimg"></span>
    <span class="viewplaylist-video">
       <img src="images/viewicon.png" width="17" height="9" alt="viewicon" class="viewplaylisticonimg"> </span>
</div>

JS

<script type="text/javascript">
$('.addtoplaylist-video').on('click', function(){
    $(this).css({'display':'none'});
    $(this).parent('.toggle,.toggle2')
        .find('.viewplaylist-video')
        .css({'display':'block'});
});


$('.viewplaylist-video').on('click', function(){
    $(this).css({'display':'none'});
    $(this).parent('.toggle, .toggle2')
        .find('.addtoplaylist-video')
        .css({'display':'block'});
});



</script>

能够使工具提示中的内容可点击。怎么样？

0 个答案: