如何使悬停状态“粘滞”

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

如果您的意思是替代文字，它真的很容易。看他的例子： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test

所以你需要添加的代码是

alt="Smiley face"

玩得开心

Answer 2

这是我的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 选择器更改为 .hoverd。然后我告诉 jquery 将类“悬停”添加到目标并从兄弟姐妹中删除该类。 当 hover 的第二个参数是 mouseout 的处理程序时，jquery 等待 1 秒（为了测试我使用快速的），然后删除类 'hoverd'。如果用户没有将鼠标悬停在其他选项卡上，则会显示默认文本。

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