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>

使css生成的内容可以点击并且可以悬停

0 个答案: