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

Question

我应该怎么做，这样当我把鼠标放在"+"上时，添加到我的播放列表就会出现，我可以点击"添加到我播放列表"并使其可链接。现在，每次我试图将鼠标悬停在添加到我的播放列表上时，它都会消失。：（

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

当前jfiddle：http://jsfiddle.net/gmraK/

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

.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

试试这个：http://jsfiddle.net/gmraK/2/

我删除了动态cssdiv/链接，并添加了一个div，该div只有在父类为active时才会显示。在切换元素悬停时添加的类。

因此，首先，我删除了您的: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;
}

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

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

然后将元素添加到HTML中。

HTML

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

最后，我修改了JavaScript。最初，您在悬停时显示内容，作为:after伪定义的一部分。JavaScript中没有真正的交互。将鼠标悬停在.toggle类上时，.active类将添加到父元素.frame中。CSS还包括一个样式，用于在父级具有.active类时显示新元素。当鼠标移出父元素时，.active类将被删除，新的div也将被删除。

JS

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

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

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

Answer 2

不用css显示文本，而是用jQuery编写。只需为"+"提供悬停方法，在悬停方法内部尝试显示文本并提供它将工作的链接。因为jQuery将为您提供动态添加HTML元素的便利。