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