Javascript 如何使从css派生的内容可点击？

我应该怎么做，当我将鼠标移到“+”上时，“添加到我的播放列表”会出现，我可以单击“添加到我的播放列表”并使其可链接。现在，每次我尝试将鼠标悬停在“添加到播放列表”上时，它都会消失

当前jfiddle：

“添加到我的播放列表”由生成

.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

js

---

不要使用css显示文本，而是在jQuery中编写。只需为该“+”提供hover方法，并在该hover方法内尝试显示文本，并为其提供链接即可。因为jQuery将为您提供动态添加HTML元素的便利。

尝试以下方法：

我删除了动态css div/链接，并添加了一个div，该div仅在父级具有active类时显示。添加到toggle元素悬停处的类

首先，我删除了您的：hover:after

为了澄清，我将其修改为一个独立的元素

CSS

然后将元素添加到HTML中

HTML

fiddle中的其他CSS包括.toggle类元素的调整位置等。以下是显示悬停时隐藏元素的部分：

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

---

@user3534158希望更新后的描述会有更多帮助。确保您也引用了小提琴中的所有CSS。我修改了一些定位，以更正要悬停的项目的位置，等等。谢谢！

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

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

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

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

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

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