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

Question

在以下条件下尝试将选项卡按钮的悬停状态变为 return 向上状态：-

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

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

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

  $('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() 函数在悬停时添加一个 class，然后在鼠标离开悬停区域时移除 class。一般示例：

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

Answer 2

如果您隐藏或显示头像，将 css class 添加到 .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 上添加和删除打开的 class 到 ".box" 元素。

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

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

Tab button hover state to return to up state on mouse leave of tab content

jquery

tabs