Question

大家。我正在开发一个包含图像列表的项目。用户可以滚动图像，然后按“输入”以显示工具提示，告诉他们更多关于他们的选择。

我一直在研究工具提示，但它们似乎更倾向于使用鼠标而且我无法修改CSS工具提示代码以在选择时将信息放在图像上。

所以，我希望有人可以指导我使用一种可以使用按键弹出信息泡泡的方法。

function loatTooltip()
{
    $('.tooltip').remove(); 
    var name=contentName[navPosition][position.x]; 
    if(position.y>0) 
        name=contentName[navPosition][position.x+4]; 
    contentList[position.y][position.x].after('<div title="'+name+'" class="tooltip"></div>');
}

.tooltip { 
          display:block; 
          position: absolute; 
          width: 250px; 
          height: 120px; 
          background: #000000; 
          -webkit-border-radius: 10px; 
          -moz-border-radius: 10px; 
          border-radius: 10px; 
          left:5%; 
} 
.tooltip:after { 
          display:block; 
          content: attr(title); 
          position: absolute; 
          display: block; 
          width: 95%; 
          z-index: 99; 
          color:white; 
} 
content: attr(title);

谢谢！

Answer 1

将此视为“初稿” - FIDDLE。

div中的图像，悬停和绝对定位的div弹出其中的文本。

我已经完成了“悬停”而不是“活跃”（选中）因为轻松。但你可以采用这个概念并将其移动到“主动”div或在其周围放置边框，“if border”会改变CSS。

JS

$('.holder').hover(
    function(){
        $(this).children('div').css({ 'display': 'block',
                                 'background-color': 'red'});
    },
    function(){
        $(this).children('div').css('display', 'none');
    }
    );

HTML / CSS / JS / jQuery需要keydown为网格提供工具提示

1 个答案: