Question

尝试在以下条件下使标签按钮悬停状态返回到向上状态： -

鼠标离开标签内容。
当用户将鼠标悬停在另一个标签上时。

以下代码不会尝试执行上述功能。

...的jQuery

    $(".box").mouseenter(function () {

    $(this).closest('.member_block').children('.member_row').addClass( "open" ); 

    var $target = $($(this).data('target'));
    $(".member_row .container .member-info").not($target).removeClass( "open" );
    $target.addClass( "open" );   

});

$(".member_block").mouseleave(function () {

    $(this).closest('.member_block').children('.member_row').removeClass( "open" );
    $(".member_row .container .member-info").removeClass( "open" );

});

HTML ...

每个标签（头像）都有两个div，一个在加载时可见，另一个是隐藏的。我们的想法是在标签悬停上切换div，显示第二个虚拟角色悬停状态。

 <div id="show_ryan" class="box five columns" data-target="#member_ryan">

                        <div class="avatar">
                            <img src="img.png">
                            <h4 class="name">Name</h4>
                        </div>

                        <div class="avatar2">
                            <img src="img.png">
                            <h4 class="position">Position</h4>
                        </div>

 </div>

Fiddle

Answer 1

如果隐藏或显示将.css类添加到.box元素的头像，如CSS上那样：

/*DEFAULT BOX STATE*/
.box .avatar-on-hidden{
    display: block;
}

.box .avatar-on-hover{
    display: none;
}


/*HOVER BOX STATE*/
.box.open .avatar-on-hidden{
    display: none;
}

.box.open .avatar-on-hover{
    display: block;
}

然后在你添加的javascript上删除打开的类到“。box”元素。

http://jsfiddle.net/273a6vss/15/

Answer 2

  $('div').
 hover(
function() {
$( this ).addClass( "myHoverClass" );
}, function() {
$( this ).removeClass( "myHoverClass" );
});

.myClass {
  background: blue;
  height:100px;
  width:100px;
}

.myHoverClass {
  background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass"></div>

您可以使用.hover（）函数在悬停时添加类，然后在鼠标离开悬停区域时删除该类。一般例子：

$('.elem').hover(function(){
    $(this).addClass('myHoverClass');
 },
 function(){
    $(this).removeClass('myHoverClass');
 });

选项卡按钮悬停状态在鼠标离开选项卡内容时返回到向上状态

2 个答案: