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>

Answer 1

不是使用css显示文本，而是在jQuery中编写。只需为该'+'指定悬停方法，并在该悬停方法内部尝试显示文本并为其提供链接。因为jQuery将为您提供动态添加HTML元素的工具。

Answer 2

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

我删除了动态css div / link并添加了一个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');    
});

小提琴中的附加CSS包括.toggle类元素的调整位置等。以下是在悬停时显示隐藏元素的部分：

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

如何使源自css的内容可点击？

2 个答案: