jquery - 如何使悬停状态 "sticky"

Question

我正在使用 几乎 纯 css，(仅在 css 中执行此操作 不是 要求)背景图像和相邻的选择器用于呈现独特的人类可读的页面当用户将鼠标悬停在水平堆叠的图像上时(在页面右侧，每个图像都使用顺序后缀的类名进行唯一分类，即, .hover1, .hover2, 到 .hover7).

如果您加载页面(在下面的 jsfiddle 链接中)并运行代码，该页面将正常工作。但是，我想启用“粘性”悬停状态，当用户将光标从图像上移开时，图像的状态和随附的文本保持悬停状态，直到:鼠标悬停在另一个图像上或一段时间过去了。假设 10 秒。

例如；这是图像的两行 HTML:

<div class="hover1"></div>
    <div class="hover1text hovertext">
        <h3>Best-in-Class BBQ</h3>
        <p>tons of text</p>
        <p>Lots more awesome text</p>
    </div>
<div class="hover2"></div>
     <div class="hover2text hovertext">
         <h3>Penetration and Vulnerability Tenderloin</h3>
          <p>More awesome text</p>
          <p>What you wanted</p>
      </div>
etc for the balance of the 7 items

我的 CSS 的一部分:

.context-services .region-inner .field-name-body .float-right .hover1 {
    background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_off.png);
    transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover {
    background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_hover.png);
    transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1 + .hover1text {
    opacity: 0;
    transition: 0s all;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover + .hover1text {
    opacity: 1;
    transition: 0s all;
}

我的 jsfiddle.net 是 here .

任何见解表示赞赏；谢谢!

Answer 1

这是我的 fix , 抱歉没有过渡

(function ($) {

$('.hover1,.hover2,.hover3,.hover4,.hover5,.hover6,.hover7').hover(
function () {
    $('.default-text').hide();
    $(this).addClass('hoverd').siblings().removeClass('hoverd');
},
function(){
    var self = $(this);
    setTimeout(function(){
        self.removeClass('hoverd');
        if (!self.siblings().hasClass('hoverd')){
            $('.default-text').show();
        }
    },1000);
});

}(jQuery));

此修复后的基本思想是使用类名而不是 css hover 'event'。由于在 css 中你无法判断目标元素的兄弟元素是否已被悬停，我建议使用 javascript 来完成这项工作。

首先，我将 :hover selctor 更改为 .hoverd。然后我告诉 jquery 将类“hoverd”添加到目标并从 sibling 中删除该类。当 hover 的第二个参数是 mouseout 的处理程序时，jquery 等待 1 秒(为了测试我使用快速的)，然后删除类 'hoverd'。如果用户没有将鼠标悬停在其他选项卡上，则会显示默认文本。

我想我拼错了 hovered...0.0，请不要介意