How do I make content derived from css clickable?

Question

What should I do such that when i mouse over the '+' , the add to my playlist appear and i'm ABLE to click on the "add to my playlist" and make it linkable. Right now, everytime i try to hover onto add to my playlist, it disappears. :(

(http://i62.tinypic.com/16bhbit.jpg)

Current jfiddle: http://jsfiddle.net/gmraK/

The add to my playlist is generated by

.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>

Answer 1

Try this: http://jsfiddle.net/gmraK/2/

I removed the dynamic css div/link and add a div that is only displayed when the parent has the class of active. A class which is added on hover of the toggle element.

So to begin, I removed your :hover:after

.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;
}

Well, to clarify, I modified it to be a standalone element.

CSS

.addtoplaylist-video-link {
    position: absolute;
    display: none;
    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;
    bottom: 15px;
    color: #ffffff;
    right: 10px;
    padding: 5px 5px;
    position: absolute;
    z-index: 98;
    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;
}

Then added the element to the HTML.

HTML

<a href="" class="addtoplaylist-video-link">Add To My Playlist!</a>

Finally, I modified the JavaScript. Originally, you were displaying the content on hover as part of the :after pseudo definition. No true interaction within the JavaScript. When you hover over the .toggle class, the .active class is added to the parent element - .frame. The CSS also includes a style to display the new element when the parent has the .active class. When mousing out of the parent element the .active class is removed and the new div is removed.

JS

$('.toggle').mouseover(function(){
    $(this).parents('.frame').addClass('active');
});
$('.frame').mouseout(function(){
    $(this).removeClass('active');    
});

Additional CSS from the fiddle includes adjusted positioning of the .toggle class elements, etc. Here is the portion to show the hidden element on hover:

.active .addtoplaylist-video-link,
.addtoplaylist-video-link:hover{
    display: block;
}

Answer 2

Instead of displaying your text using css, write that in jQuery. Just give hover method for that '+' and inside that hover method try to display the text and give the link for that it will work. Because jQuery will give you facility to add HTML elements dynamically.