2

我正在使用几乎纯 css，（仅在 css 中执行此操作不是必需的）背景图像和相邻选择器用于呈现独特的人类可读文本信息的页面（通过具有类名“default-”的页面左侧的 div text") 当用户将鼠标悬停在水平堆叠的图像上时（在页面的右侧，每个图像都使用顺序后缀的类名进行唯一分类，即 .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 在这里。

任何见解都值得赞赏；谢谢！

4

2 回答 2

1

这是我的修复，抱歉没有过渡

(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 悬停“事件”。由于在 css 中您无法判断目标元素的兄弟姐妹是否已悬停，因此我建议您使用 javascript 来完成这项工作。

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

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

于 2013-04-27T10:05:58.587 回答
-2

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

所以你需要添加的代码是

alt="Smiley face"

玩得开心

于 2013-04-27T01:44:16.217 回答