Question

我正在使用几乎纯css，（在css中这样做只是不要求）背景图片和相邻选择器的页面呈现独特的人类可读当用户将鼠标悬停在水平堆叠的图像上时（在页面的右侧，每个图像被唯一地分类为顺序后缀的类名，即，文本信息（通过页面的左侧，类名为“default-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是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悬停'event'。因为在css中你无法判断目标元素的兄弟姐妹是否已经悬停，我将建议使用javascript来完成这项工作。

首先，我改变：将浏览器悬停到.hoverd。然后我告诉jquery将类'hoverd'添加到目标并从兄弟姐妹中删除该类。当hover的第二个参数是mouseout的处理程序时，jquery等待1秒（对于测试我使用快速的一个），然后删除类'hoverd'。如果用户不将鼠标悬停在其他标签上，则会显示默认文本。

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

Answer 2

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

所以你需要添加的代码是

alt="Smiley face"

玩得开心

如何使悬停状态“粘”

例如;这里是图像的两行HTML：

我的CSS中的一部分：

2 个答案: